[英]Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy
Adding to the database shows the error.添加到数据库显示错误。 what should I do?我应该怎么办?
Access to fetch at 'http:xxx' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 策略已阻止从源“http://localhost:3000”获取“http:xxx”的访问权限:对预检请求的响应未通过访问控制检查:无“访问控制允许来源”header存在于请求的资源上。 If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
my function:我的 function:
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);
})
}
try using ''no-cors' mode.尝试使用“no-cors”模式。
fetch('http://localhost:8080/example', {
mode: 'no-cors',
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(ob)
})
Your server should respond with a response that looks like below您的服务器应该响应如下所示的响应
Access-Control-Allow-Origin: https://localhost:3000
Untill you are able to configure that as a workaround you can install the below chrome extension to resume your testing在您能够将其配置为解决方法之前,您可以安装以下 chrome 扩展程序以恢复测试
https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB
But the above is only a workaround to continue development但以上只是继续开发的一种变通方法
I would suggest you read this article for understanding CORS https://javascript.info/fetch-crossorigin我建议您阅读这篇文章以了解 CORS https://javascript.info/fetch-crossorigin
I resolved the issue by installing the cors
node module and adding this on the requested server我通过安装cors
节点模块并将其添加到请求的服务器上解决了这个问题
const cors = require("cors");
app.use(cors());
For browser CORS is enabled by default and you need to tell the Browser it's ok for send a request to server that not served your client-side app ( static files ).对于浏览器 CORS 默认启用,您需要告诉浏览器可以向未服务于您的客户端应用程序的服务器发送请求( static 文件)。
if you use RestFul API with node and express add this middleware to your file如果您使用带有节点的RestFul API并快速将此中间件添加到您的文件中
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*")
})
You must install cors.您必须安装 cors。
npm install cors
inside the main scripts index.js or app.js在主脚本 index.js 或 app.js 中
const cors = require("cors");
app.use(cors());
The middleware should be like this.中间件应该是这样的。
app.use((req, res, next) => {
res.header({"Access-Control-Allow-Origin": "*"});
next();
})
const cors = require("cors");常量 cors = 要求(“cors”); app.use(cors()); app.use(cors());
i use this but can't solve this problem.我用这个但不能解决这个问题。
app.use((req, res, next) => { res.header({"Access-Control-Allow-Origin": "*"}); next(); }) when use this code than solve this problem app.use((req, res, next) => { res.header({"Access-Control-Allow-Origin": "*"}); next(); }) 当使用这个代码比解决这个问题
make a new variable called header:创建一个名为 header 的新变量:
const header = new Headers({ "Access-Control-Allow-Origin": "*" });
pass this variable as an object in fetch:在 fetch 中将此变量作为 object 传递:
fetch(url, { header: header })
.then((res) => res.json())
.then((data) => console.log(data));
This will resolve the issue这将解决问题
Try using the following code:尝试使用以下代码:
var corsOptions = {
origin: "http://localhost:3000"
};
app.use(cors(corsOptions));
You should copy in server.js(or app.js)您应该复制 server.js(或 app.js)
(I've experienced the exact same problem as this one. I was able to solve the problem by adding the following code to server.js.)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.