2

I have Angular 2 typescript application running on my localhost. I have to access external REST API in my application. Whenever I try to access, I get this error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ***. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

What is the best solution to fix this issue. I dont want to use any plugin/addOns. I dont think so this package would work for Angular 2 Typescript application.It is used for express.js

npm install cors --save 

How do I set this CORS header ‘Access-Control-Allow-Origin’ using typescript for entire project/application? Where do I need to add this header in below code?

var request = new XMLHttpRequest();
   let myurl='http://remoteIP/api';
request.open('GET', myurl, true);
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload = (e) => {
        console.log('DataURL:', reader.result);
    };
};
request.send();
5
  • 1
    This header needs to be added on the server side, not in client-side TypeScript code. Commented Aug 24, 2017 at 14:57
  • @RayToal How do I add it on the server side? Commented Aug 28, 2017 at 7:22
  • That depends on the server technology you are using. The way you worded the question it sounded like you were accessing someone else's external REST API which you would have no control over. If you are writing the server yourself, you can add the Access-Control-Allow-Origin header to the responses that need it (i.e., the ones access through Ajax calls). Commented Aug 28, 2017 at 16:46
  • @RayToal The server is Jenkins Server. I am trying to access Jenkins Rest API for e.g. http://ci.jruby.org/job/jruby-base/lastSuccessfulBuild/ in my angular typescript application. Angular application is on my localhost. This is when I get the CORS issue. Commented Aug 29, 2017 at 7:45
  • This Jenkins Plugin might help you then Commented Aug 30, 2017 at 4:05

1 Answer 1

2

The server that hosts that API needs to enable CORS. This is a limitation of client-side languages - they make these REST requests through the browser. The browser will change whatever mocked origin headers you give it to your actual website's headers.

This isn't an issue with server-side languages, such as PHP or even nodeJS/expressJS.

Sign up to request clarification or add additional context in comments.

5 Comments

If at all I have access to the server , How do I enable CORS on that server ?
@JeffHuijsmans stackoverflow.com/questions/7067966/how-to-allow-cors - this is for node.js/express.js...I have to run this script on server side?
No, first see what kind of server you're running. If it's Apache, search this website for "CORS apache". If it's nginx, search this website for "CORS nginx", etc.
@JeffHuijsmans It is a ubuntu server, where Jenkins is running. I am trying to access Jenkins Rest API in my angular application.
@JeffHuijsmans Thanks a lot. It helped to resolve the issue. I installed CORS plugin.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.