CORS策略已阻止从来源“ http：// localhost：4200”访问“ http：// localhost：56557 / api / tw /”处的XMLHttpRequest：

Question

我收到以下错误消息。当我尝试从angular 5.0发送请求时。

在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段access-control-allow-origin。

（使用Postman，API调用有效）

以下是角度代码

let config = {
      headers: {
         "Content-Type": "application/json,charset=utf-8",
         "access-control-allow-origin": "*",
         "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
         "access-control-allow-headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"

        }
      }

    let obs = this.httpClient.post('http://localhost:56557/api/tw/',bodypara,config);

---

以下是Web配置更改

<system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <!--<remove name="OPTIONSVerbHandler" />-->
      <remove name="TRACEVerbHandler" />
      <!--<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />-->
      <add name="Browser Link for HTML" path="*.html" verb="*"
         type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
         resourceType="File" preCondition="integratedMode" />
    </handlers>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <remove name="ApplicationInsightsWebTracking" />
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
    </modules>
  <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
          <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
      </httpProtocol>




  </system.webServer>

Answer 1

您已经告诉您的应用程序，不允许将access-control-allow-*标头包含在Access-Control-Allow-Headers选项中：

<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />

这就是为什么您看到此错误。

另外， access-control-allow-*标头都是响应标头，通常无论如何服务器都将忽略它们。 只需将它们从您的请求中删除即可。

Answer 2

只需在服务器上文件顶部添加以下代码。

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");

如果您在角度文件或请求文件中设置了特定的标题

您将需要输入它们，如下所示：

Access-Control-Allow-Origin: [SCHEME]://[HOST]:[PORT_OPTIONAL]

---

方案 => http/https

主机 => server ip/domain name

PORT_OPTIONAL => port //optional