Angular2 application calling asp.net webapi getting No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to access secure my angular2 application with api using identityserver.

I am following the steps mentioned in SPA Authentication using OpenID Connect, Angular CLI and oidc-client

I am getting the following error. On the server side, i have added the following to enable 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.

Can anyone please help to solve this?

Thanks

this chrome plugin might helps you https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim?hl=en — Ketan Akbari, Feb 21 '18 at 11:04
this link will be help full https://stackoverflow.com/questions/13061524/how-to-set-access-control-allow-origin-on-particular-file-web-config — Ashokkumar M. Prajapati, Feb 21 '18 at 11:48

score 1 · Answer 1 · answered Feb 21 '18 at 11:00

1

when working on the same local host - It appears that a different port is considered as a different domain. Exceptional addition I noticed: "Internet Explorer does not consider the port when comparing origins You need to enable CORS (cross origin request) in your web api. Follow instruction given in below page

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

answered Feb 21 '18 at 11:00

Soumya B. Athani

378
1
3
13

Thank you. But before accessing the api, because my angular application is secured using the identityserver, to redirect to authserver i am getting this error. – Mukil Deepthi Feb 21 '18 at 11:05

score 1 · Answer 2 · answered Feb 21 '18 at 11:50

CORS needs to be enabled on server side. By your .net application.

you can use following

<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>

Or for allowing everthing for everyone

<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>

AddWeb Solution Pvt Ltd · Answer 3 · 2018-02-21T11:07:24.240

0

@Mukil Deepthi

Try like below code :

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);
        });
    })

also, use Cors addon in your browser

edited Feb 21 '18 at 11:07

answered Feb 21 '18 at 11:04

AddWeb Solution Pvt Ltd

21,025
5
26
57

Thank you. as mentioned in the the link, i am using UserManager to redirect the angular application to identityserver. Not sure where to add this bit of code. Basiclly it should redirect to the authority url – Mukil Deepthi Feb 21 '18 at 11:07

Angular2 application calling asp.net webapi getting No 'Access-Control-Allow-Origin' header is present on the requested resource

3 Answers3