Setting response header with javascript

Question

I'm having troubles with collecting json values from a URL in my application. When I try to get them a error log is displayed in the console saying that origin is not allowed by access-control-allow-origin.

I researched a bit and found out that response headers have to be set to Access-Control-Allow-Origin: *

How can I do that using pure javascript? No jquery or any other library.

This is my current code:

<script type="text/javascript">
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "http://example.com/id=69", false );
    xmlHttp.send( null );
    console.log("JSON values from URL: ");
    console.log(xmlHttp.responseText);
</script>

Answer 1

I researched a bit and found out that response headers have to be set to Access-Control-Allow-Origin: *

How can I do that using pure javascript? No jquery or any other library.

You can't, not unless your server is running JavaScript (NodeJS, etc.).

The server has to allow access to the resource from the origin of your document. The way it works is:

• The browser asks permission to access the resource (this is called a "preflight" request), telling the server what resource it wants access to, etc.

• The server replies with the appropriate headers telling the browser whether access will be allowed.

• The browser sends the actual request.

• The server responds to it (again including the relevant headers).

I believe there are situations where the pre-flight isn't necessary. All of that is handled for you by the XMLHttpRequest object.

Details in the Cross-Origin Resource Sharing specification.

Answer 2

You cannot do this on client side, your server must send these headers.