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

Posted 2023-02-22

【中文标题】CORS 策略已阻止访问从源“http://localhost:3000”获取

【英文标题】：Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy

【发布时间】：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 是您的服务器 - 您可以将其配置为发送允许跨域请求的标头

它实际上告诉你问题是什么。见***.com/a/10636765/12989672

这能回答你的问题吗？ How does Access-Control-Allow-Origin header work?

我认为 localhost 现在被授予了对现代浏览器（包括 Chrome）的 CORS 限制的例外。您是直接从 Web 服务器而不是从本地源文件中提取 html 吗？

【参考方案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());