Cross Domain XMLHttpRequest problem and some solutions

Cross-domain request: Cross-domain request is requesting the content from another host. When we request to a third party site to get content that is called cross-domain request. By default XMLHttpRequest (XHR) request allows transferring data only if both parties have the same Origin value (protocol, domain, and port).

You will face this error sometimes when you try to access content from another domain using ajax or iframe:

XMLHttpRequest cannot load http://www.domain.com/path/filename. Origin null is not allowed by Access-Control-Allow-Origin.

We get this error because of the same-origin policy (which means both pages should be the same combination of URI scheme, hostname, and port number. This policy prevents access to sensitive data on a webpage located on another host)

These are some ways through which we can allow Cross-domain requests to content hosted on our web-server:

1. CORS (Cross-Origin Resource Sharing):
Using CORS we can allow our content to be accessible. An external web page can then freely access cross-origin images, stylesheets, scripts, iframes, and videos using ajax request or using iframes. We need to set following in the webpage that we want to be accessible (the example is in PHP):

// header() need to call before return any actual output in the PHP  page.

Here * means that all the domains are allowed to access the response of our script. We can set a specific domain also if want to allow limited access.

2. JSONP:
JSONP is json with padding. It is a communication technique used in JavaScript for sending JSON data to another website without worrying about cross-domain issues. In this case server sends the response (in JSON format) but with a function call (for example response sent by server code will be like this – clientJSFunction({ “Product”:”Soap”, “SKU”:”10030”, “expiry”:”March 2018″ });). With the client will call this server code and receive this response clientJSFunction will be searched in the JS code of client and it will be called. Name of the JS function (clientJSFunction) is sometimes hardcoded inside the server file and at other times server may all the ow client to pass this function name.

Example:

$.ajax({
url: "http://remote.domain.com/data/?callback=jsonpContainer&id=45732",
jsonp: "jsonpContainer", //the name of the callback function with the assumption that server accepts name of JS function to call
dataType: "jsonp", //tell jQuery to expect JSONP
data: { id: "123" }, //tell YQL what we want and that we want JSON
success: function(data) { //work with the response
console.log(data); //formatted JSON data { "id": "45732", "comments": "30", "name": "testdata" }
}
});

3. postMessage method:
window.postMessage is a new feature in HTML5. It allows safe cross-origin communication between window/frames. postMessage() provides us a way to securely pass messages across different window frames, even if the window has a different domain, port or a protocol.

Example: targetWindow.postMessage(message, targetDomain, [extra]);

targetWindow / Reference to the window that will receive the message.
message // JSON object or text that will be sent to the target window.
targetDomain // Domain to which the message should be posted, we can use “*” which will allow all domain But its not secure.So we should avoid "*".
extra // A sequence the of extra optional message.

If we are using iframe then targetWindow will be:

document.getElementById(“frameId”).contentWindow.