如何修复"评估已被 CORS 策略阻止：反应中没有'访问控制-允许-来源'

Question

我有一个web应用程序与react前端和django后端。来自后端的一些api被cors策略阻塞，而另一些则没有。例如，获取博客文章的APIconst res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts`)正在返回数据，但const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/${slug}`);的单个帖子API被阻塞。注册和登录api也被阻止了。我已经将域添加到settings.py中允许的url列表中，但这并没有解决问题。我在详细页面中得到的错误是:

undefined:1 Access to XMLHttpRequest at 'https://.api.example.co/blog/undefined' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

settings.py

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOWED_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
'http://127.0.0.1:8000',
'http://localhost:3000',
'https://example.co',
]
CORS_ORIGIN_WHITELIST = [
'http://127.0.0.1:8000',
'http://localhost:3000',
'https://example.co',
]
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]
CORS_REPLACE_HTTPS_REFFERER = True

当我使用邮差测试API的一切工作正常。但在react应用中，只有API列出了返回数据的帖子或项目，其他的都被屏蔽了。为什么会有这样的行为，我该如何解决?

Answer 1

这个问题有两个部分。1.有什么问题吗?2.你怎样才能彻底或立即解决这个问题?我认为你的问题是从你的后端api，不添加你的主机，允许主机在他们的代码。当你运行你的项目时，在你的系统上创建一个虚拟主机，从你的虚拟服务器调用你的Api，这就是你的请求从你的运行项目失败的原因，从邮递员传递。实际上改变你的后端代码或web服务器设置，允许从另一个来源可以解决你的问题。但是如果你不访问你的后端团队，你想自己解决你的问题，你可以添加你的浏览器内核头扩展，可以通过你的测试用例的请求。最后，我给你很好的扩展你的chrome浏览器。https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en