Angular2 to REST WebApi CORS issue

Question

I\'m using an angular2 front end and WebApi backend. The webapi is CORS enabled

var cors = new EnableCorsAttribute(\"*\", \"*\", \"*\");
GlobalConfiguration.         


        

Answer 1

Do you have any options set into your web.config file for cors ? i.e something like <add name="Access-Control-Allow-Origin" value="*"/>

If yes make sure to remove that, and control the cors through the code only.

The Answer here will help you.

Answer 2

For development purpose add this Chrome extension and enable cross-origin resource sharing.

Answer 3

In my case I used Owin and had to move the following line to the beginning of the startup

public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            ...
        }
    }
}

Answer 4

I'm working with Angular 2 for the front-end and nodeJS (Expressjs) to the API

Angular 2 is working under localhost:3000 and express is working on localhost:8000

The problem happen when localhost:3000 tries call a URL with the POST method... The expressJS server rejects the call because it comes from another server (or port)

To solve the problem you should tell node js to accept calls from the localhost:3000 server...

You can find a library (CORS) to avoid this problem in this link:

Answer 5

You can add one add-on in your Firefox browser. It will work in your firefox browser like charm. Cors Everywhere solved my problem. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

Answer 6

Please follow the step for CROS ISSUE fixes in WEB API:

1. Enabling CORS required Headers in the Application. i.e. in “Application_BeginRequest” Method in “Global.asax” file for simple requests.

2. Placing the below code in “web.config” file helped in CORS issue for preflight requests

   <system.webServer>
             <handlers>
               <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
               <remove name="OPTIONSVerbHandler" />
               <add name="ExtensionlessUrlHandler-Integrated-4.0"path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
             </handlers>
           </system.webServer>
   

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