调用 webapi asp.net Angular2 应用程序获得 请求的资源上不存在"访问控制-允许源"标头

Question

我正在尝试使用IdentityServer访问使用API的Angular2应用程序。

我遵循使用OpenID Connect，Angular CLI和OIDC-CLIENT

的SPA认证中提到的步骤

我遇到以下错误。在服务器端，我添加了以下内容以启用CORS：

new Client{
     .....,
      AllowedCorsOrigins = new List<string>
      {
         "http://localhost:4200"
      }
}
    Failed to load https://localhost:44300/identity/.well-known/openid-configuration: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4200' is therefore not allowed access.

任何人都可以帮助解决这个问题吗？

谢谢

Answer 1

在同一本地主机上工作时 - 看来另一个端口被视为另一个域。我注意到了出色的补充："在比较起源时，Internet Explorer不考虑端口您需要在Web API中启用CORS(交叉原点请求(。遵循以下页面中给出的说明

https://learn.microsoft.com/en-us/aspnet/web-api/web-api/overview/security/enabling-cross-cross-origin-requests-in-requests-in-web-api

Answer 2

需要在服务器端启用CORS。通过您的.NET应用程序。

您可以使用以下

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="www.somedomain.com" />
      <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>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="*" />
      <add name="Access-Control-Allow-Methods" value="*" />
    </customHeaders>
  </httpProtocol>

Answer 3

@mukil deepthi

尝试以下代码：

let url = this.hostname + endPoint; //your API
    let headers = new Headers();
    headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('content-type','application/json');
      let options = new RequestOptions({ headers:headers});
    return new Promise((resolve,reject)=>{
       this.http.post(url,JSON.stringify(data), options).subscribe(res => {
          resolve(res.json());
        }, (err) => {
          reject(err);
        });
    })

另外，在浏览器中使用cors addon