时间戳

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

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

问题描述

我有一个带有反应前端和 django 后端的 Web 应用程序。来自后端的一些 API 被 cors 策略阻止，而其他 API 则没有。例如，获取博客文章的 API const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/posts`)正在返回数据，但单个文章的 APIconst 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 时，一切正常。但是在反应应用程序中，只有列出返回数据的帖子或项目的 API，其他的被阻止。为什么会出现这种行为，我该如何解决？

标签： javascriptreactjsdjangoaxiosdjango-cors-headers

解决方案

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

推荐阅读