Chrome shows Access Control Allow Origin error

Question

I'm using jquery to post data to a server, the server received the data, but the chrome still shows the error :

XMLHttpRequest cannot load `myServer:63373/api/sendData`. Origin `myServer:63385` is not allowed by Access-Control-Allow-Origin.

Here is my js code:

 $.ajax({
            type: 'POST',
            url: 'myServer:63373/api/SendData',
            crossdomain: true,
            async: true,
            data: myData,
            dataType: 'json',
            success: function(){ alert('success'); }
        });

The strange thing is that the 'success' shows up after the request, and the server did receive the data, but then the error message shows up in the console. Is there any way to avoid this message?

possible duplicate of [Ways to circumvent the same-origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) — Quentin, Sep 25 '13 at 09:44
@Quentin should probably check that it's not possible to work *with* the same-origin policy before trying to work around it. — David-SkyMesh, Sep 25 '13 at 09:46
@David-SkyMesh — It seems reasonable to assume that the origins are different for a reason. — Quentin, Sep 25 '13 at 09:50
@David-SkyMesh - and a large portion of the accepted answer on that question is ground that your answer retreds. — Quentin, Sep 25 '13 at 09:50

score 4 · Accepted Answer · edited May 23 '17 at 12:05

4

Thanks for all you answers above but I think I've found the way, before I solve this I was trying to use two ways, Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method with the 87 votes and 32 votes, I found the answers at two different places, and both applied them, but it didn't work. Early this week, I tried to delete the code in the web.config and just left the code in C#, it works! Can't believe these two solutions have confliction.

Anyway, hope this could help others.

edited May 23 '17 at 12:05

Community

1
1

answered Oct 10 '13 at 01:42

Edgar

273
1
3
12

I corrected this same error in NGINX also with this solution, in my case: location ~* \.(json)$ { more_set_headers "Access-Control-Allow-Origin: $http_origin"; } – renedet Feb 10 '14 at 12:51

score 0 · Answer 2 · answered Sep 25 '13 at 09:43

"not allowed by Access-Control-Allow-Origin" is the reason. Put simply, you can't normally do an XHR call to a different domain/port/protocol from those of the webpage your javascript was included into.

Modern browsers allow you work around this with permission from the server administrator.

You make your Ajax request with the XHR2 API (http://www.html5rocks.com/en/tutorials/cors/)

The on the server side, you need to emit the following headers to allow access from the domain that served the page that included your javascript:

Access-Control-Allow-Origin: http://your-page-domain.com
Access-Control-Allow-Credentials: true

score 0 · Answer 3 · answered Sep 25 '13 at 09:46

if situation are

your script is hosted on another server
or subdomain
or try to hit url with another port

this is cross-domian request. jquery can not fulfill cross-domain request.

if this is your issue , then you should use jsonp for this "jsonp " allows cross domain request.

try to do this with using jsonp.

for jsonp every call has a callback means there will be a value in url and you have to send respnse with this call back in php

means try this:-

$.ajax({
        type: 'POST',
        url: 'myServer:63373/api/SendData',
        crossdomain: true,
        async: true,
        data: myData,
        dataType: 'jsonp',
        success: function(){ alert('success'); }
    });

and in php

wrap your response in  $_GET['_callback']."(".$response.")"; and echo it

you will get response in json .

Chrome shows Access Control Allow Origin error

3 Answers3

Linked