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>

Mayoralty

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.

Bonds

My server is running NodeJS. Can I set the response headers then? – Deaf

@MarkoĆilimković: Of course, in code on the server using response.setHeader. CORS is pretty finicky, you need to be sure you're allowing everything the client is asking for, which means examining the request headers the browser sent. – Bonds

@T.J.Crowder this browser extension resolves CORS policy issue on client side . how it can be done without extension chrome.google.com/webstore/detail/allow-control-allow-origi/… – Nissa

@T.J.Crowder i mean the extension is also using the javascript on client-side but still able to override the CORS issues. So, why it can't be done using javaScript in html page. – Nissa

@SatinderBajwa - Because extensions can do things web-page code can't. – Bonds

Answer 2

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

Widthwise