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

Question

我有一个带有 React 前端和 django 后端的 Web 应用程序。 来自后端的一些 API 被 cors 策略阻止，而其他的则没有。 例如，用于获取博客帖子的 API const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts`)正在返回数据，但用于单个帖子的 API const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/${slug}`); 被阻止。 注册和登录 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.

设置.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 时，一切正常。 但是在 React 应用程序中，只有 API 列出了返回数据的帖子或项目，其他的都被阻止了。 为什么会出现这种行为，我该如何解决？

Answer 1

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