如何修复“评估已被 CORS 政策阻止：反应中没有“访问控制允许来源”

Posted 2023-03-03

【中文标题】如何修复“评估已被 CORS 政策阻止：反应中没有“访问控制允许来源”

【英文标题】：How to fix "assess has been blocked by CORS policy: No 'Access-Control-Allow-Origin' in react

【发布时间】：2021-12-09 23:03:22

【问题描述】：

我有一个带有 react 前端和 django 后端的 Web 应用程序。 来自后端的一些 API 被 cors 策略阻止，而其他 API 则没有。例如，获取博客文章的 API const 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

当我使用 Postman 测试 API 时，一切正常。但是在反应应用程序中，只有列出返回数据的帖子或项目的 API，其他的被阻止。为什么会出现这种行为，我该如何解决？

【问题讨论】：

你能从后端提供服务器 cors 部分吗？

是的，我已将其添加到上面的帖子中

【参考方案1】：

这个问题有两个部分。 1.什么问题？ 2.你怎样才能完全或目前解决这个问题？ 我认为您的问题来自您的后端 api，它没有添加您的主机以允许 Host 在他们的代码中。 当您运行项目时，系统上会创建一个从虚拟服务器调用 Api 的虚拟主机，这就是您的请求从运行项目失败并从邮递员传递的原因。 实际上，更改可以允许来自其他来源的后端代码或 Web 服务器设置可以解决您的问题。 但是，如果您不访问您的后端团队并且您想自己解决您的问题，您可以添加您的浏览器核心标头扩展，它可以传递您对测试用例的请求。 最后，我为您的 chrome 浏览器提供了很好的扩展。 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

【讨论】：

Thabks @sajadab。我已经评估了后端，我想从那里修复它