XMLHttpRequest无法加载，不存在“ Access-Control-Allow-Origin”标头（无法在JavaScript / jQuery中读取Ajax响应）

Question

I'm sending an Ajax request to server using jQuery, below is the code snippet.

$.ajax({                
                type: 'POST',
                url: "https://store.example.com/account?",                
                data: "cf=cw&operation=update"
            })

Definitely, “requested page” and “Ajax request's URL” are in same domain. Still, Am seeing specified error message in browser console and unable read response with JavaScript/jQuery. Please help me here.

Error message: XMLHttpRequest cannot load https://store.example.com/account ?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://store.example.com ' is therefore not allowed access.

Answer 1

AJAX Requests are only possible if port, protocol and domain of sender and receiver are equal,if not might lead to CORS. CORS stands for Cross-origin resource sharing and has to be supported on the server side.

Solution

JSONP

JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy.

Example

$.ajax({
    type: 'POST',
    url: "https://store.example.com/account?",
    dataType: 'jsonp',
    success: function (data) {
        //code
    }
});

Hope this gives you an idea mate.. :)

Answer 2

Are the requesting page and requested URL are in the same domain. Can you try accessing the url using relative path?

$.ajax({                
            type: 'POST',
            url: "/account?",                
            data: "cf=cw&operation=update"
        })