ExtJS Send Ext.Ajax.request on cross-domain failure

Question

Hi I know this is an old issue.

I refer to this but still doesn't work.

Chrome show this error message:

XMLHttpRequest cannot load target url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' my web url ' is therefore not allowed access.

Here is my code:

Ext.Ajax.request({
        url: 'target url',
        method: 'POST',
        cors: true,
        useDefaultXhrHeader: false,
        success: function() {
            alert('success');
        },
        failure: function() {
            alert('failure');
        }
    });

Answer 1

The key to the solution is hidden in plain view in the first line of the post you refered to; let me cite it:

Backend sends Access-Control-Allow-Origin: * correctly

Well, your browser states that your backend doesn't do that:

No 'Access-Control-Allow-Origin' header is present on the requested resource

The issue is that the browser does not allow your code to access anything it wants. The server has to actively allow your page to read the json data. The server can indicate this by setting the Access-Control-Allow-Origin header accordingly (eg to target url if it wants to allow your site specifically, or * as a wildcard).

Shouldn't you be able to find a solution how to add such header in your backend by yourself, you may create a new question containing details about the backend you use.