[英]Access to fetch `url` been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ReactJS
I'm am trying to fetch a serverless function from a react app in development mode with the following code.我正在尝试使用以下代码从处于开发模式的 React 应用程序中获取无服务器 function。
let response = await fetch(url,
{
method: 'POST',
mode: 'cors',
body: "param=" + paramVar,
})
.then(response => response.json());
The backend function is a Python Cloud function with the following code:后端function是一个Python云function,代码如下:
def main(request):
# CORS handling
if request.method == 'OPTIONS':
# Allows GET requests from any origin with the Content-Type
# header and caches preflight response for an 3600s
headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Max-Age': '3600'
}
return ('', 204, headers)
# Set CORS headers for the main request
headers = {
'Content-Type':'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type',
}
# Process request
return (json.dumps(response), 200, headers)
But I keep getting the following error:但我不断收到以下错误:
Access to fetch at 'url' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
When I try to perform the same request using curl I get a proper response.当我尝试使用 curl 执行相同的请求时,我得到了正确的响应。 Using curl to get the options gives me the following:
使用 curl 获取选项给我以下信息:
HTTP/2 204
access-control-allow-headers: Content-Type
access-control-allow-methods: GET, POST
access-control-allow-origin: *
access-control-max-age: 3600
content-type: text/html; charset=utf-8
date: Sun, 16 Aug 2020 01:29:41 GMT
Anyone can help me understand why I'm not able to get a response at my front-end?任何人都可以帮助我理解为什么我无法在前端获得响应? The 'Access-Control-Allow-Origin' is present in the headers so I really don't understand what is the cause of this error.
标头中存在“Access-Control-Allow-Origin”,所以我真的不明白这个错误的原因是什么。
Install the CORS package in the backend.在后端安装 CORS package。 Then open your server.js file or whatever is yours.
然后打开您的 server.js 文件或您的任何文件。 Then import it to the file
然后将其导入文件
const cors = require('cors');
And then use it然后使用它
app.use(cors());
reload the browser and should be done!重新加载浏览器,应该完成!
add content-type header to your fetch method in the frontend and try again:将内容类型 header 添加到前端的 fetch 方法中,然后重试:
let response = await fetch(url,
{
method: 'POST',
mode: 'cors',
body: "param=" + paramVar,
headers: {
'Content-Type': 'application/json'
},
}).then(response => response.json());
There was actually a bug in the backend that was only triggered by some additional headers added by the browser.实际上,后端存在一个错误,该错误仅由浏览器添加的一些附加标头触发。 In that particular case, the server was returning a 404 error which wouldn't contain my header definitions and would cause the CORS policy block.
在这种特殊情况下,服务器返回 404 错误,其中不包含我的 header 定义,并会导致 CORS 策略阻止。
I was only able to identify the bug after I used devtools to track the request sent by the browser and replicated all the headers in my curl request.在我使用 devtools 跟踪浏览器发送的请求并复制我的 curl 请求中的所有标头后,我才能够识别错误。 After fixing the function logic the problem was fixed.
修复 function 逻辑后,问题得到修复。
This is my first post at Stack这是我在 Stack 的第一篇文章
I saw OP's response and I think I know what they meant - as I ran into the same problem myself.我看到了 OP 的回复,我想我知道他们的意思——因为我自己也遇到了同样的问题。
Basically when you send a request to 'url', if that URL didn't reply with a successful response, then it will send you a 'bad response', in my case, a "503".基本上,当您向“url”发送请求时,如果 URL 没有成功回复,那么它会向您发送“错误回复”,在我的例子中是“503”。 A "503" response is still a response, but this response would not contain the access-control-allow-origin header, so the browser (dutifully) replied that it will not accept this - even if it's garbage anyway!
“503”响应仍然是响应,但此响应不会包含访问控制允许来源 header,因此浏览器(尽职地)回复说它不会接受这个 - 即使它无论如何都是垃圾!
Hope that might be helpful to someone else... Cheers希望这可能对其他人有帮助......干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.