christopher christopher - 30 days ago 6
AngularJS Question

Working Angualrjs & Web api 2 port different problom

I have developed AngularJS application along with ASP.NET WebAPI 2, application structure should be website layer, data access layer (entity FW) , WebApi layer
every think works fine.

The problem is my website is running on

http://localhost:8080
and WebAPI runs on
http://localhost:1696/api/album
. Therefore I cannot access the data through angular service. I am looking for a permanent solution.

If I go for CORS is it a good solution ?

Answer Source

Normally you should do this with configuring CORS indeed by adding the configuration to either your WebAPI configuration or web.config.

For the WebAPI configuration you should specify the following:

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

In the web.config it should look like this:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
      </customHeaders>
    </httpProtocol>
<system.webServer>

Of course, this allows all origins, so you have to change it to localhost:8080 in your situation. Keep in mind, different ports are different origins, so specifying only localhost isn't sufficient, the port should be added also!

When moving to production, you should configure the correct CORS locations via the build server of course, but that's a completely different topic.