AngularJS Allow-Origin to WebApi2

Question

I want to host my API on a separate domain. I have configured my auth-interceptor for token in angular with a bearer:

config.headers.Authorization = 'Bearer ' + sessionStorage.getItem('token');

In my My WebApi2 I have configured the WebApiConfig with cors.

var cors = new EnableCorsAttribute("http://mydomain.com", "*", "*");
config.EnableCors(cors);

And in web.config of the API I also included:

<customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>

I still can´t access the api due to origin not allowed. Can I add something more in my header of the auth-interceptor in angular or what do I need to do?

Answer 1

In web.config of API, include the below mentioned code:

<system.webServer>    
    <httpProtocol>
          <customHeaders>
            <remove name="X-Powered-By" />
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
          </customHeaders>
        </httpProtocol>
 <handlers>
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="WebDAV" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
     </system.webServer>

I hope this helps.

Thanks.

Answer 2

I've had the same issue before and what worked for me was to remove the settings from the web.config and just leave the configuration settings in the WebApiConfig class

See this answer for more details

Answer 3

your Angular.js interceptor settings are ok. I've got a public project with your same scenario, with OAuth+Owin authentication. The steps I followed are:

1. Installation of Microsoft.Owin.Cors library
2. Creation of custom section config to enable/config CORS
3. Creation of custom CORS Policy class (with the origins to enable)
4. Setup of CORS policy depending on configurations

Hope this helps