被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-03

【中文标题】被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Blocked by CORS policy : No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2020-01-24 03:03:40

【问题描述】：

您好，我使用 django rest 框架作为 API 服务并使用 React 作为前端。我可以在开发和部署到 iis 时从 react 调用 api。我收到此错误

请求中没有“Access-Control-Allow-Origin”标头 资源。

我已经这么说了=>CORS Error

但我仍然收到此错误。

我的 Django 在 localhost:81 上运行

我的反应应用程序运行在：192.168.1.32:81

我可以在两个都安装的本地服务器上运行它，但是当我在另一台计算机上尝试时出现此错误。

我使用 fiddler 4 覆盖主机名中的端口。

【问题讨论】：

这能回答你的问题吗？ No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

【参考方案1】：

在run (windows key + r) 中使用此命令并在新浏览器中运行您的应用

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

希望它能如你所愿

【讨论】：

工作就像一个魅力

其他想要访问这个应用程序的人呢？他们如何知道他们需要运行此命令才能使应用程序运行？他们为什么还要这样做？

【参考方案2】：

您可以使用 iis 响应标头：

1)打开 iis 管理器并选择站点。

2)双击中间窗格中的 HTTP 响应标头。

3)在操作窗格中，单击“添加”。

4) 在名称框中，键入自定义 HTTP 标头名称。 在“值”框中，键入自定义 HTTP 标头值。

下面是标题和值：

访问控制允许来源：*

访问控制允许标头：内容类型

访问控制允许方法：GET、POST、PUT、DELETE、OPTIONS

访问控制允许凭据：true

5)点击确定。

或者您可以直接在web.config文件中添加以下代码：

<system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
         <add name="Access-Control-Allow-Credentials" value="true" />
        </customHeaders>
      </httpProtocol>
  </system.webServer>

【讨论】：

我通过将 localhost 更改为 IP 地址来解决它，它可以工作。谢谢。

@Loran 我很高兴你自己解决了这个问题。请将解决方案作为答案发布并标记。它会帮助其他人。