相关疑难解决方法(0)

我知道fetch正在使用promises,它们都允许你向服务器发出AJAX请求.我已经读过fetch有一些额外的功能,这些功能在XMLHttpRequest(以及fetch polyfill中,因为它基于XHR)中不可用.fetch API有哪些额外功能？

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

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

我正在使用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的资源.

我尝试了对REST-API的ReactJS fetch调用,并希望处理响应.通话有效,我收到回复,我可以在Chrome开发工具中看到:

function getAllCourses() {
fetch('http://localhost:8080/course', {
    method: 'POST',
    mode: 'no-cors',
    credentials: 'same-origin',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        objectClass: 'course',
        crud: '2'
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

当我尝试处理响应时,我得到了一个"SyntaxError:意外的输入结束"

return response.json();

console.log看起来像这样:

我的响应JSON看起来像这样,它是有效的,我用jsonlint检查它:

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3", …

我正在尝试正确解释从 fetch 调用到 URL 的响应，我认为它是一个 json 字符串。我已经根据这里的类似帖子尝试了许多变体，但没有什么能让我使用有用的数据。这是一种尝试：

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then(function(response) { 
        response.json().then(function(data) {
            console.log('data:' + data);
        });
    })
    .catch(function(err) {
        console.log('Fetch Error :-S', err);
    });

这会在控制台中返回一个语法错误：

SyntaxError: JSON.parse: JSON 数据第 1 行第 1 列的数据意外结束

所以也许它不是 JSON...如果我在 console.log 行上放置一个断点，并将鼠标悬停在响应（上面的行）上，我会看到带有各种字段的响应对象 (?)：

不知道如何解释...status:0 表明它没有得到有效的响应。但是，如果我检查开发人员工具中的 Network 选项卡，然后单击 fetch 行，则状态为 200，并且响应窗口/JSON 部分会显示消息信息，如果您只是将 URL 放入浏览器 URL 中，您也会看到这些信息直接酒吧。与显示 JSON 字符串的“响应负载”部分一样：

{"msg": "API 已准备就绪。", "success": true}

所以......它看起来像json，不是吗？但是 fetch 无法将其作为 json 摄取？

这是另一种变体，但使用 response.text() 而不是 response.json()

fetch('http://serverURL/api/ready/', {method: "POST", mode: "no-cors"})
    .then((response) => {
        console.log(response);
        response.text().then((data) …

我尝试通过网址(带ref().put(file))(www.example.com/img.jpg)将图片上传到Firebase存储空间.

要做到这一点,我需要一个文件或Blob,但每当我尝试new File(url)它时说"没有足够的论点"......

编辑:我实际上想上传整个文件目录,这就是为什么我无法通过控制台上传它们

我收到以下错误消息，我无法继续

无法加载https：//site/data.json：对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问源' http：// localhost：8080 '。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。localhost /：1未捕获（承诺）TypeError：无法获取

我正在尝试CORS在我的react js文件中启用，但无法获得预期的结果。我已经安装了chrome扩展程序，并且可以正常工作。但是要在生产站点中使用它，我需要在代码中启用它。我应该如何正确安排代码以启用CORS。

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {

添加到数据库显示错误。我该怎么办？

从源“ http://localhost:3000 ”获取“http:xxx”的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：无“Access-Control-Allow-Origin”标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我的功能：

  addItem = (e) => {
e.preventDefault();
const ob = {
  X: 53.0331258,
  Y: 18.7155611,
}
fetch("http://xxx", {
  method: "post",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(ob)
})
  .then(res => res.json())
  .then(res => {
    console.log(res);
  })

}

我读了这个问题和 这个问题。前者只解释了“no-cors”与“same-origin”；后者建议 'no-cors' 没有用，因为不透明响应（Javascript 无法读取/执行任何有用的操作）：

你基本上从不想在实践中使用 mode: 'no-cors'——除非在一些非常有限的情况下。那是因为设置模式：'no-cors' 实际上对浏览器说的是，“在任何情况下都阻止我的前端 JavaScript 代码查看响应正文和标题的内容。” 在大多数情况下，这显然不是您想要的。

有人可以告诉我们这些“有限情况”的例子是什么，我们希望使用“无cors”（即使响应是不透明的？）

我能想到的唯一情况是一种单向通信；如果客户端向服务器发送 GET 或 POST 就足够了，那么服务器就可以跟踪请求的发生；（例如，增加请求计数器）；...

...那么响应是一个 OpaqueResponse 就足够了；即客户端只需要知道请求是否成功（状态 200），不需要任何负载响应。

我的想法是一个有效的例子吗？有人可以推荐其他可能性/用例/'no-cors'用法的例子吗？

我正在使用reactjs构建仅前端的基本Weather App。对于API请求，我正在使用Fetch API。在我的应用程序中，我从找到的简单API获取当前位置，并且该位置将其作为JSON对象给出。但是，当我通过Fetch API请求它时，出现此错误。

Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

因此，我进行了搜索，找到了解决此问题的多种解决方案。

1. 在Chrome中启用CORS可以解决该错误，但是当我在heroku上部署该应用程序时，如何通过移动设备访问它而又不会遇到相同的CORS问题。
2. 我找到了启用CORS请求的代理API。但是由于这是一个位置请求，所以这给了我代理服务器的位置。因此，这不是解决方案。
3. 我已经解决了这个Stackoverflow问题，并将标头添加到我的http请求中的标头中，但是它不能解决问题。（仍然会给出相同的错误）。

那么，如何才能永久解决该问题？我可以用来解决Fetch API中HTTP请求的CORS问题的最佳解决方案是什么？