Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Angular

Mudit

Asked on April 14, 2017

I am working on Angular 2. My angular application is running on URL

http://localhost:4200

I am trying to access a URL

http://localhost:8080/spring-app/info

using following code

return this.http.get(this.url) .map(this.extractData)

.catch(this.handle);

But I am unable to access it. In browser console I have following error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/spring-app/info. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

How to resolve it?

Mukesh

Replied on April 14, 2017

There is no issue in your angular code.

When we use Ajax, angular etc to access a URL that has different origin then CORS (Cross-origin-request-sharing) needs to be handled at different origin side.

In your scenario, angular application is running on http://localhost:4200 and you are fetching data from the different origin http://localhost:8080

If the application installed on http://localhost:8080 does not respond with header

Access-Control-Allow-Origin = http://localhost:4200

Then we will get CORS error. To avoid this error. We can consider two solution.

1. Both the application should be on same server, it means we can access

http://localhost:4200/spring-app/info

2. The application installed on http://localhost:8080 must send header Access-Control-Allow-Origin containing origin of your angular application such as

Access-Control-Allow-Origin = http://localhost:4200