WebApi authentication failed on server with Angular

Question

I am using Asp.Net web API 2.0 with Angular 6 for UI. The solution contains the projects for angular and web API. My solution works fine (I am able to access pages and login) when I am running it on Visual Studio on localhost. However when I deploy the build on server I am unable to login and getting the below error:

Access to XMLHttpRequest at 'http://xx.xx.xx.xxx:xxxxx/authenticate' from origin 'http://xx.xx.xx.xxx:xxxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

score 0 · Answer 1 · answered Mar 05 '20 at 05:29

0

To quickly handle CORS for Web API, add below settings in web.config file of Web API inside <system.webServer> section:

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

But there is a security risk involved in enabling CORS. A good explanation is here.

answered Mar 05 '20 at 05:29

as-if-i-code

2,103
1
10
19

Thanks for your answer, please let me verify if it works. – Sushant Rawat Mar 05 '20 at 05:29
I think the risk enabling CORS in the way you have demonstrate is that requests will be accepted regardless of where the page is hosted. If you properly configure CORS to only accept requests from known pages, then there isn't a security risk. – ProgrammingLlama Mar 05 '20 at 05:41
@John Risk is not much with common internet based web applications. But if your application has some confidential resources then, as you said, we should allow limited origins. – as-if-i-code Mar 05 '20 at 05:45
@as.if.i.code Well it didn't work. Any more suggestions? – Sushant Rawat Mar 05 '20 at 06:06
@SushantRawat Are you still getting the same error? – as-if-i-code Mar 05 '20 at 06:29
@as.if.i.code:The error has changed, now I am getting 401 (Unauthorized) error. – Sushant Rawat Mar 05 '20 at 06:59
@SushantRawat Ohh, its good that CORS issue is resolved. For 401 you might need to recheck/reconfigure your request. – as-if-i-code Mar 05 '20 at 07:30

score 0 · Answer 2 · answered Mar 05 '20 at 06:12

0

Can you please add this following code to startup.cs -> configure()

app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials());

answered Mar 05 '20 at 06:12

Klyc Creative

166
9

I have already used this in my web API code. Can you please suggest something else? – Sushant Rawat Mar 05 '20 at 06:58

score 0 · Answer 3 · answered Mar 05 '20 at 06:24

Browser security prevents a web page from making AJAX requests to another domain. This restriction is called the same-origin policy and prevents a malicious site from reading sensitive data from another site. However, sometimes you might want to let other sites call your web API.

Install-Package Microsoft.AspNet.WebApi.Cors

Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method: config.EnableCors();

Next, add the [EnableCors] attribute to the Controller class

[EnableCors(origins: "*", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }

Now you can access the API's

WebApi authentication failed on server with Angular

3 Answers3