标签: fetch-api

不透明响应被定义为Fetch API的一部分,并表示在未启用CORS时对远程源发出的请求的结果.

关于如何使用不透明的响应(包括JavaScript和页面上的资源)存在哪些实际限制和"陷阱"？

有fetch('somefile.json'),可以请求从服务器而不是从浏览器缓存中提取文件？

换句话说,有fetch()没有可能绕过浏览器的缓存？

我有一个HTTP API,它在成功和失败时返回JSON数据.

示例失败将如下所示:

~ ? http get http://localhost:5000/api/isbn/2266202022 
HTTP/1.1 400 BAD REQUEST
Content-Length: 171
Content-Type: application/json
Server: TornadoServer/4.0

{
    "message": "There was an issue with at least some of the supplied values.", 
    "payload": {
        "isbn": "Could not find match for ISBN."
    }, 
    "type": "validation"
}

我想在JavaScript代码中实现的是这样的:

fetch(url)
  .then((resp) => {
     if (resp.status >= 200 && resp.status < 300) {
       return resp.json();
     } else {
       // This does not work, since the Promise returned by `json()` is never fulfilled
       return Promise.reject(resp.json()); …

我正在使用HTML5 fetch API.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

我能够使用普通的json但无法获取上述api url的数据.它抛出错误:

Fetch API无法加载https://davidwalsh.name/demo/arsenal.json.请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" :HTTP //本地主机,因此"是不允许访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

我从浏览器发送这样的POST请求:

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

由当时的请求到达我的后端不包含X-My-Custom-Header也不Authorization头.

我的后端是Firebase的Google Cloud功能(基本上只是Node.js端点),如下所示:

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

,谷歌的云计算功能的火力地堡的控制台日志不包含任何X-My-Custom-Header也不Authorization头.

怎么了？

编辑1

因此,使用Chrome中的开发工具检查既没有X-My-Custom-Header也没有Authorization从浏览器发送标题...现在的问题是:为什么？我如何解决它？ …

当请求状态大于400(我已尝试过400,423,429状态)时,fetch无法读取返回的json内容.浏览器控制台中显示以下错误

未捕获(承诺)TypeError:无法在'Response'上执行'json':正文流被锁定

我显示了返回的响应对象的内容,如下所示:

但几个月前我仍然可以使用它.

我的问题如下:

• 这只是Chrome浏览器的行为或获取标准的变化吗？
• 有没有办法获得这些状态的身体内容？

PS:我的浏览器版本是Google Chrome 70.0.3538.102(正式版本)(64位)

我有一个react/redux应用程序,我正在尝试对服务器执行简单的GET请求:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); });

问题是.then()函数中的响应体是空的,我不知道为什么.我在网上检查了一些例子,看起来我的代码应该可行,所以我显然在这里遗漏了一些东西.问题是,如果我检查Chrome的开发工具中的网络选项卡,则会发出请求并收到我正在寻找的数据.

任何人都可以对这一个发光吗？

编辑:

我尝试转换响应.

使用.text():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', error); }); …

我在这里看到了两个不同的提取:

• https://github.com/github/fetch

• https://github.com/matthew-andrews/isomorphic-fetch

有人能告诉我两者之间的区别吗？

PS:我已经阅读了README.md,但我仍然没有得到区别.我上次检查时,Isomorphic意味着它具有相似的形式或关系.它对我来说仍然没有意义.

如果我有一个网址数组:

var urls = ['1.txt', '2.txt', '3.txt']; // these text files contain "one", "two", "three", respectively.

我想构建一个如下所示的对象:

var text = ['one', 'two', 'three'];

我一直在努力学习如何做到这一点fetch,这当然会回归Promises.

有些事情我已经试过了不工作:

var promises = urls.map(url => fetch(url));
var texts = [];
Promise.all(promises)
  .then(results => {
     results.forEach(result => result.text()).then(t => texts.push(t))
  })

这看起来不对,无论如何它都不起作用 - 我最终没有数组['one','two','three'].

Promise.all在这里使用正确的方法？

我正在使用npm'isomorphic-fetch'来发送请求.我遇到的问题是我无法设置请求标头的内容类型.

我设置了application/json的内容类型,但是请求标头被设置为text/plain.

import 'isomorphic-fetch';

  sendRequest(url, method, body) {
    const options = {
      method: method,
      headers:{'content-type': 'application/json'},
      mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
  }

当我在浏览器中检查请求时,内容类型是o:

content-type:text/plain;charset=UTF-8

任何人都可以解释为什么我无法设置此属性？