CORS 策略已阻止访问从源“http://localhost:3000”获取答案

【问题标题】：Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policyCORS 策略已阻止访问从源“http://localhost:3000”获取
【发布时间】：2020-07-29 00:14:36
【问题描述】：

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

CORS 策略已阻止从源“http://localhost:3000”获取“http:xxx”的访问权限：对预检请求的响应未通过访问控制检查：没有“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);
  })

}

【问题讨论】：

当您尝试从不同的域（在您的情况下为 xxx）发出请求时，浏览器不允许发送此类请求。如果 xxx 是您的服务器 - 您可以将其配置为发送允许跨域请求的标头
它实际上告诉你问题是什么。见stackoverflow.com/a/10636765/12989672
这能回答你的问题吗？ How does Access-Control-Allow-Origin header work?
我认为 localhost 现在被授予了对现代浏览器（包括 Chrome）的 CORS 限制的例外。您是直接从 Web 服务器而不是从本地源文件中提取 HTML 吗？

标签： javascript reactjs

【解决方案1】：

您的服务器应该响应如下所示的响应

Access-Control-Allow-Origin: https://localhost:3000

在您能够将其配置为解决方法之前，您可以安装以下 chrome 扩展程序以恢复您的测试

https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB

但以上只是继续开发的一种变通方法

我建议您阅读这篇文章以了解 CORS https://javascript.info/fetch-crossorigin

【讨论】：

【解决方案2】：

对于浏览器，CORS 默认启用，您需要告诉浏览器可以向未为您的客户端应用程序（静态文件）服务的服务器发送请求。

如果您使用 RestFul API 和 node 并快速将此中间件添加到您的文件中

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*")
})

【讨论】：

应用未定义
你应该先在顶部导入express by； const express = require("express"); 然后const app = express();

【解决方案3】：

尝试使用“no-cors”模式。

fetch('http://localhost:8080/example', {
            mode: 'no-cors',
            method: "post",
            headers: {
                 "Content-Type": "application/json"
            },
            body: JSON.stringify(ob)
 })

【讨论】：

【解决方案4】：

中间件应该是这样的。

app.use((req, res, next) => {
  res.header({"Access-Control-Allow-Origin": "*"});
  next();
})

【讨论】：

【解决方案5】：

我通过安装 cors 节点模块并将其添加到请求的服务器上解决了这个问题

const cors = require("cors");
app.use(cors());

【讨论】：