No 'Access-Control-Allow-Origin' header present AngularJS

Question

I am trying to build a quick demo site that I do not have control over the server I am trying to connect to. Here is the code that I am using to build it with AngularJS. I am running the file through a simple Python HTTP Server and viewing it at localhost:8000. var retrieveAppliances = function () { console.log('Attempting to retrieve appliance list.');

var requestUrl = '****';
    $http({
        method: 'GET',
        url: requestUrl,
    })
    .then(function (response) {
        console.log(response);
    });
};
retrieveAppliances(); 

I have read multiple places to try switching the method to JSONP but doing so resulted in a parsing error.

While I have considered trying to build a server.js file and running NodeJS with it, I am unsuccessful in learning the basics of making an AJAX request and proxying that to my app.js.

I will greatly appreciate any help that someone may be able to give me, with clear and easy to follow steps.

Answer 1

If you're running an Ajax call to a different origin (eg different host, port or protocol) and the server at that origin does not have support for cross origin requests, then you cannot fix that from your client. There is nothing you can do from the client.

If the server supported JSONP, you could use that, but that also requires specific server support.

The only solutions from a browser web page are:

1. CORS support on the target server.
2. JSONP (also requires support on the target server).
3. Set up your own server that you do have access to (either on your existing page domain or with CORS) and then have that server get the file/data for you and proxy it back to you. You can either write your own proxy or deploy a pre-built proxy.
4. Find some existing third party proxy service that you can use.

If you're interested in making your own node.js proxy, you can see a simple example here: How to create a simple http proxy in node.js? .