Origin is not allowed by Access-Control-Allow-Origin

Question

I'm making an Ajax.request to a remote PHP server in a Sencha Touch 2 application (wrapped in PhoneGap).

The response from the server is the following:

XMLHttpRequest cannot load http://nqatalog.negroesquisso.pt/login.php. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

How can I fix this problem?

Solution 1

I wrote an article on this issue a while back, Cross Domain AJAX.

The easiest way to handle this if you have control of the responding server is to add a response header for:

Access-Control-Allow-Origin: *

This will allow cross-domain Ajax. In PHP, you'll want to modify the response like so:

<?php header('Access-Control-Allow-Origin: *'); ?>

You can just put the Header set Access-Control-Allow-Origin * setting in the Apache configuration or htaccess file.

It should be noted that this effectively disables CORS protection, which very likely exposes your users to attack. If you don't know that you specifically need to use a wildcard, you should not use it, and instead you should whitelist your specific domain:

<?php header('Access-Control-Allow-Origin: http://example.com') ?>

Solution 2

If you don't have control of the server, you can simply add this argument to your Chrome launcher: --disable-web-security.

Note that I wouldn't use this for normal "web surfing". For reference, see this post: Disable same origin policy in Chrome.

One you use Phonegap to actually build the application and load it onto the device, this won't be an issue.

Solution 3

If you're using Apache just add:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

in your configuration. This will cause all responses from your webserver to be accessible from any other site on the internet. If you intend to only allow services on your host to be used by a specific server you can replace the * with the URL of the originating server:

Header set Access-Control-Allow-Origin: http://my.origin.host

Solution 4

If you have an ASP.NET / ASP.NET MVC application, you can include this header via the Web.config file:

<system.webServer>
  ...

    <httpProtocol>
        <customHeaders>
            <!-- Enable Cross Domain AJAX calls -->
            <remove name="Access-Control-Allow-Origin" />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

Solution 5

This was the first question/answer that popped up for me when trying to solve the same problem using ASP.NET MVC as the source of my data. I realize this doesn't solve the PHP question, but it is related enough to be valuable.

I am using ASP.NET MVC. The blog post from Greg Brant worked for me. Ultimately, you create an attribute, [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")], that you are able to add to controller actions.

For example:

public class HttpHeaderAttribute : ActionFilterAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }
    public HttpHeaderAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        filterContext.HttpContext.Response.AppendHeader(Name, Value);
        base.OnResultExecuted(filterContext);
    }
}

And then using it with:

[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]
public ActionResult MyVeryAvailableAction(string id)
{
    return Json( "Some public result" );
}

View more solutions

Comments

[Ricardo]

But I need to load the webservice from a mobile device, I would a bypass this?

[antyrat]

Well you need to make some server-side changes or use JSONP en.wikipedia.org/wiki/JSONP

[Ricardo]

I'll contact my server provider. Thanks

[Ricardo]

Thanks. But my app is running on mobile devices, I cant pass arguments to my webview wrapper.

[Travis Webb]

Don't you test your app in a browser first? How do you debug?

[Ricardo]

Yes i debug in a Chrome browser, but the app wont run on chrome. It will be on phonegap webview witch i cant control.

[Walery Strauch]

And don't forget to load module: a2enmod headers

[JohnK]

Are there any security concerns with this? This answer, for example, says "JavaScript is limited by the "same origin policy" for security reasons, For example, a malicious script cannot contact a remote server and send sensitive data from your site."

[vbullinger]

Awesome, I just put this in my node.js server file: response.writeHead(200, { 'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' }); And it worked. Thanks!

[Nick]

JohnK, yes, the wildcard is going to allow any domain to send requests to your host. I recommend replacing the asterisk with a specific domain that you will be running scripts on.

[Jamie Hutber]

how to heck do you do this? I've looking and can't find this setting inside of chrome.

[Travis Webb]

read the answer: you can simply add this argument to your Chrome launcher. There is no setting for this inside Chrome

[jfrej]

Uh, you shouldn't even suggest the wildcard. It's a massive security no no and should be used only if you really know what you're doing, see code.google.com/p/html5security/wiki/CrossOriginRequestSecur‌​ity It's scary to see this answer upvoted so many times.

[Matt Mombrea]

It's interesting that you think the wildcard shouldn't even be suggested @jfrej. It all depends on your goal. For example, the reason we used the wildcard (and posted this answer) was because we were building an embedded widget for any site to use.

[Ali Gangji]

it's worth noting that wildcard Origin cannot be used with Access-Control-Allow-Credentials

[Andrey]

Working with Asp Mvc Api, i also needed this answer to make all the peaces come together stackoverflow.com/questions/12405459/…

[ottoflux]

.NET MVC People, LOOK here! I'm actually going to type up a solution and point to this answer on my blog so that people can find it easier. Nothing worse than trying to get past a .NET/MVC hurdle and finding nothing but PHP/jQuery solutions. Thanks @Caio-Proiete

[Kildareflare]

Pointed me in the right direction in resolving ACAO error with azure. Whilst I had added allowed hostname of googledrive. URL used needs to be googledrive NOT googledrive

[Matt Frear]

WebApi 2 has this built in now. asp.net/web-api/overview/security/…

[newman]

How comes this doesn't work for me? I'm using Chrome and trying to access yahoo finance page from my localhost.

[Eddy Ferreira]

@TravisWebb from CLI you can open the browser by typing /PATH_TO_CHROME/Chrome.app --args --disable-web-security

[ethem]

thanks it worked for me. I have added in the server side code project (web.config).

[Ayesha]

how to load module:a2enmod headers ?

[providencemac]

This is not a good recommendation - it will only mask the problem and make it work on your own development machine. Taking this approach means that your app will break in production since your users won't have the security disabled. Follow the accepted answer above to properly fix this issue.

[Travis Webb]

Of course it's insecure. The OP is asking for a way around the security measures.

[omid.n]

it used to be working but I guess in chrome 49 it doesn't!

[omid.n]

update: what you need to do is to use --user-data-dir and --disable-web-security flags altogether(chrome 49+).

[rigdonmr]

what controller do you put this in if it's an ajax call? Can I see more code context?