Angular2应用程序调用asp.net webapi获取No' Access-Control-Allow-Origin'标头出现在请求的资源上

时间:2018-02-21 10:51:12

标签: angular angular-cli identityserver4 openid-connect oidc

我正在使用identityserver尝试使用api访问secure我的angular2应用程序。

我正在按照SPA Authentication using OpenID Connect, Angular CLI and oidc-client

中提到的步骤进行操作

我收到以下错误。在服务器端,我添加了以下内容以启用cors:

ERROR: (gcloud.beta.app.deploy) Permissions error fetching application [<project here>]. Please make sure you are using the correct project ID and that you have permission to view applications on the project.

有人可以帮忙解决这个问题吗?

由于

3 个答案:

答案 0 :(得分:1)

在同一本地主机上工作时 - 看起来不同的端口被视为不同的域。特别添加我注意到:&#34; Internet Explorer在比较来源时不考虑端口 您需要在web api中启用CORS(交叉源请求)。按照以下页面中的说明进行操作

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

答案 1 :(得分:1)

需要在服务器端启用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>

答案 2 :(得分:0)

@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插件