CORS 策略阻止了从源“http://localhost:3000”获取的访问

Question

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

从源“ 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);
  })

}

Answer 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

Answer 2

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

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

Answer 3

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

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