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




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?



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




Write Answer










©2024 concretepage.com | Privacy Policy | Contact Us