Angular 4 / Asp.net Web API - No 'Access-Control-Allow-Origin' header is present

Question

I'm trying to call the API from angular and getting this errors. I donot want to set proxy in angular instead allow CORS in Angular 4 and Web API.

Following is my code:

let reHeader: RequestOptions = new RequestOptions();
        reHeader.headers = new Headers();
        reHeader.headers.append("content-type", "application/json");
        reHeader.headers.append("x-api-key", store.APIKey);
        reHeader.headers.append('Access-Control-Allow-Origin','*');
        reHeader.headers.append('Access-Control-Allow-Methods', "GET, POST, PATCH, PUT, DELETE, OPTIONS")
        reHeader.headers.append('Access-Control-Allow-Headers', "Origin, Content-Type, X-Auth-Token")
        switch (rtype) {
            case "get":
                let query: string = "";
                action.ActionParams.forEach(m => {
                    query += "&" + m.Key + "=" + m.Value;
                });
                url = url + query;
                return this.http.get(url, reHeader);
            default:
                return Observable.of(null);
        }

and from WEB API in startup.cs

    public void Configuration(IAppBuilder app)
            {
                app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
// ASPNETCORE_ENVIRONMENT should be set to 'Development'
            if (env != null && env.IsDevelopment())
            {
                app.UseErrorPage(ErrorPageOptions.ShowAll);
            }

            var config = new HttpConfiguration();
            ConfigureWebApi(config);
            // Swagger
            SwaggerConfig.Register(config);
            // Register routes
            WebApiConfig.Register(config);
             }

I have checked other posts but still didnt get solution. - Angular 2 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

Does that help? https://stackoverflow.com/questions/20079813/how-to-make-cors-authentication-in-webapi-2 Also, you don't need to set the cors headers client side like in your example — David, Feb 15 '18 at 18:19

score 0 · Accepted Answer · answered Jun 04 '18 at 05:44

Add below code in Global.asax and try

protected void Application_BeginRequest(Object sender, EventArgs e)
        {

            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Pragma, Cache-Control, Authorization ");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

Angular 4 / Asp.net Web API - No 'Access-Control-Allow-Origin' header is present

1 Answers1