Cross Origin Resource Sharing (CORS) in Angular or Angular 6. Problem while you make cross domain calls on localhost with different ports

Question

I have come across a situation where I make a call from my angular 6 application to my spring boot application. When I call an HTTP post method in angular to the application running on a different port it throws an exception.

Access to XMLHttpRequest at 'http://localhost:8080/api' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

My Angular application Running on 'http://localhost:4200' port number:4200 My Spring Boot application running on 'http://localhost:8080/api': port number:8080.

There is no direct answer to solve this problem. There are few hacks to disable the security in chrome and using NGINX you can resolve this issue.

score 3 · Accepted Answer · edited Apr 15 '19 at 22:25

To Solve the above problem

First you need to share the Spring boot resource for the port 4200. Annotate the class or method with @CrossOrigin(origins = "http://localhost:4200") of resource you want to share.
Yo have to configure proxy in angular application. So create a proxy.json file in angular root application. and the content goes below
```
{
"/api/*": {
    "target": "http://localhost:8080",
    "secure": "false",
    "logLevel": "debug",
    "changeOrigin": true
}
```
}

And then run ng serve --proxy-config proxy.json this command it will compile the code. You should see something like this on a console.

building modules 3/3 modules 0 active[HPM] Proxy created: /api -> 
http://localhost:8080 Subscribed to http-proxy events: [ 'error', 'close' ]

score 1 · Answer 2 · answered Feb 28 '19 at 16:50

1

As when you are running angular and web api, but these are running on two port. You need to enable CORS policy on your server.

If you are using web api, then enable cors policy on your project and it will solve your issue.

answered Feb 28 '19 at 16:50

Abdus Salam Azad

3,109
31
23

I am rendering SSRS reports on angular app and getting error of cross domain because my app is running on localhost and ssrs report server is on other domain. I need to enable the CORS in ssrs server side but don't know how to do that. Do you have any idea. – Virender Thakur Dec 04 '20 at 06:42

score 0 · Answer 3 · answered Apr 08 '19 at 08:42

In startup.cs class, add the following statements in the two methods ConfigureServices and Configure(). This solution worked with me without the need to install CORS on web browsers:

public void ConfigureServices(IServiceCollection services)
    {
        // Add policy for CORS
        services.AddCors(options =>
        {
            options.AddPolicy("AllowAll",
                builder =>
                {
                    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials();
                });
        });

       // You additional configurations here....
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors("AllowAll"); // Add this line here or inside if (env.IsDevelopment()) block

        if (env.IsDevelopment())
        {
            // app.UseCors("AllowAll");
            app.UseDeveloperExceptionPage();
        }
}

Its .NET Core we are looking for Angular 6++ – Ricardo G Saraiva Mar 20 '20 at 18:42 — Ricardo G Saraiva, Mar 20 '20 at 18:42

score 0 · Answer 4 · answered Aug 16 '19 at 23:48

was full on nightmare with the cors the other day so I switched my programming paradigm.

for my web app im developing, eventually im deploying to a production, in this case Im using Heroku you could use GCP or similar. To work on server side stuff like http I use Postman to test all the http routes, postman doesn't get blocked from cors. it also can rapidly send them in an organized folder as opposed to filling out an entire use case just to get to the HTTP req.

After my unit tests are done and verified I deploy server to Heroku and then I work on the client. this way the client makes requests to the server which is Elsweyr and does not receive cors.

score 0 · Answer 5 · answered Apr 30 '20 at 18:52

I was running a local Angular 8 application on http://localhost:4200 that makes REST calls to my spring boot application also running locally on http://localhost:8101, and I was getting the same error when trying to run a POST REST call). I just added the "@CrossOrigin" annotation to the top of my @RestController class and it worked

Cross Origin Resource Sharing (CORS) in Angular or Angular 6. Problem while you make cross domain calls on localhost with different ports

5 Answers5

Linked