I am getting Cross origin error using angular 4 webapi2

Question

I am working on an application using angular 4 and Web api. I am getting CORS error even I have kept code in Web.config , Start Up, WebApiConfig and on Controller as well but still i am getting this error. I don't to how to figure it out. Here is my code examples

Startup.cs

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

WebApiConfig

 var cors = new EnableCorsAttribute("*", "*", "*");
            config.EnableCors(cors);

Web.Config

<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" />
      </customHeaders>
    </httpProtocol>

Controller

 [EnableCors(origins: "*", headers: "*", methods: "*")]
    [ApiVersion1RoutePrefix("Settings")]
    public class SettingsController : ApiController

Even someone asked to remove this tag as well from web config and i also did this

<!--<remove name="OPTIONSVerbHandler" />-->

My angular call is here

  public getbyString<T>(apiUrl:any,param: string): Observable<T> {
    let _options = { headers: new HttpHeaders(
      { 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+ localStorage.getItem('access_token')
      }
    )};
    return this.http.get<T>(this.actionUrl+apiUrl +"?version="+param,_options);
  }

Please see the below to see the error.

I have done this all but no success yet.

"I am getting CORS error" — **What** CORS error? There are several different error messages that a browser might output which relate to CORS. It's really hard to identify the problem if you don't tell us which one you get! — Quentin, Dec 18 '18 at 10:58
Why are you getting a Content-Type header on a GET request? The request has no body to describe the content type of! — Quentin, Dec 18 '18 at 10:59
I have added think may this would solve my error though it doesn't — Shamshad Jamal, Dec 18 '18 at 11:09
I am getting access-control-allow-origin configuration no header is added — Shamshad Jamal, Dec 18 '18 at 11:18
One origin is `www.example.com` the other is `example.com` - Why are you event making a cross origin request? Just pick one host name and use it and only it. (Redirect the other one to it). — Quentin, Dec 18 '18 at 11:33
Instead of sometimes using `example.com` and sometimes using `www.example.com` **always** use `www.example.com` — Quentin, Dec 18 '18 at 11:36
One thing i want to clear is www.Offey.ae/OffeyApp is my service end means WebAPI2 project and offey.ae is my angular application kept on root directory — Shamshad Jamal, Dec 18 '18 at 11:43

score -1 · Answer 1 · answered Dec 18 '18 at 10:52

-1

CORS (Cross-Origin Resource Sharing) is a way for the server to say "I will accept your request, even though you came from a different origin." This requires cooperation from the server – so if you can't modify the server (e.g. if you're using an external API), this approach won’t work.

Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *).

answered Dec 18 '18 at 10:52

Akash Gupta

34
10

"Modify the server to add the header Access-Control-Allow-Origin" — They appear to have done that. You can see it in the code in the question. – Quentin Dec 18 '18 at 10:59

I am getting Cross origin error using angular 4 webapi2

1 Answers1