Access-Control-Allow-Origin不允许使用Origin

时间:2012-04-13 14:50:20

标签: javascript ajax cors xmlhttprequest cross-domain

我正在为Sencha Touch 2应用程序中的远程PHP服务器Ajax.request(包含在PhoneGap中)。

服务器的响应如下:

  

XMLHttpRequest无法加载http://nqatalog.negroesquisso.pt/login.php。 Access-Control-Allow-Origin不允许原点http://localhost:8888

如何解决此问题?

18 个答案:

答案 0 :(得分:370)

前一段时间我写了一篇关于这个问题的文章Cross Domain AJAX

如果您拥有对响应服务器的控制权,最简单的方法是为以下内容添加响应标头:

Access-Control-Allow-Origin: *

这将允许跨域Ajax。在PHP中,您需要修改响应,如下所示:

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

您可以将Header set Access-Control-Allow-Origin *设置放在Apache配置或htaccess文件中。

应该注意的是,这有效地禁用了CORS保护,很可能会使您的用户受到攻击。如果您不知道您特别需要使用通配符,则不应使用它,而应将您的特定域列入白名单:

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

答案 1 :(得分:61)

如果您 无法控制服务器,只需将此参数添加到Chrome启动器:--disable-web-security

请注意,我不会将此用于正常的“网上冲浪”。有关参考,请参阅此帖子:Disable same origin policy in Chrome

您使用Phonegap实际构建应用程序并将其加载到设备上,这不是问题。

答案 2 :(得分:41)

如果您正在使用Apache,请添加:

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

在您的配置中。这将导致您的网络服务器的所有回复都可以从互联网上的任何其他网站访问。如果您打算仅允许特定服务器使用主机上的服务,则可以将*替换为原始服务器的URL:

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

答案 3 :(得分:18)

如果您有ASP.NET / ASP.NET MVC应用程序,则可以通过Web.config文件包含此标头:

<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>

答案 4 :(得分:15)

这是我尝试使用ASP.NET MVC作为数据来源解决同一问题时出现的第一个问题/答案。我意识到这并没有解决PHP问题,但它足够有价值。

我正在使用ASP.NET MVC。 blog post from Greg Brant为我工作。最后,您创建一个属性[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")],您可以将其添加到控制器操作中。

例如:

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);
    }
}

然后使用它:

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

答案 5 :(得分:10)

由于Matt Mombrea对于服务器端是正确的,您可能会遇到另一个问题,即白名单拒绝。

您必须配置phonegap.plist。 (我使用旧版本的phonegap)

对于cordova,命名和目录可能会有一些变化。但步骤应该大致相同。

首先选择支持文件&gt; PhoneGap.plist

enter image description here

然后在“ExternalHosts”下

添加一个条目,其值可能为“http://nqatalog.negroesquisso.pt” 我正在使用*仅用于调试目的。

enter image description here

答案 6 :(得分:7)

对于需要对引荐来源的“www”和“非www”版本都有例外的人来说,这可能很方便:

 $referrer = $_SERVER['HTTP_REFERER'];
 $parts = parse_url($referrer);
 $domain = $parts['host'];

 if($domain == 'google.com')
 {
         header('Access-Control-Allow-Origin: http://google.com');
 }
 else if($domain == 'www.google.com')
 {
         header('Access-Control-Allow-Origin: http://www.google.com');
 }

答案 7 :(得分:7)

我将为您提供一个简单的解决方案。在我的情况下,我无法访问服务器。在这种情况下,您可以更改Google Chrome浏览器中的安全策略以允许Access-Control-Allow-Origin。这很简单:

  1. 创建Chrome浏览器快捷方式
  2. 右键单击快捷图标 - &gt;属性 - &gt;快捷方式 - &gt;目标
  3. 简单粘贴"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

    位置可能不同。现在点击该快捷方式打开Chrome。

答案 8 :(得分:7)

在处理各种API时,我遇到过这种情况。通常快速解决方法是添加“&amp; callback =?”到一个字符串的结尾。有时,&符必须是字符代码,有时是“?”:“?callback =?” (见Forecast.io API Usage with jQuery

答案 9 :(得分:6)

如果您正在编写Chrome扩展程序并收到此错误,请确保已将API的基本网址添加到manifest.json的{​​{3}},例如:

"permissions": [
    "https://itunes.apple.com/"
]

答案 10 :(得分:6)

如果您使用的是apache,只需使用以下内容将.htaccess文件添加到您的目录中:

Header set Access-Control-Allow-Origin: *

Header set Access-Control-Allow-Headers: content-type

Header set Access-Control-Allow-Methods: *

答案 11 :(得分:5)

如果你在Angular.js中得到这个,那么请确保你像这样转义你的端口号:

var Project = $resource(
    'http://localhost\\:5648/api/...', {'a':'b'}, {
        update: { method: 'PUT' }
    }
);

有关详情,请参阅here

答案 12 :(得分:5)

这是因为same-origin policy。详情请见Mozilla Developer NetworkWikipedia

基本上,在您的示例中,您只需从http://nqatalog.negroesquisso.pt/login.php加载nqatalog.negroesquisso.pt页面,而不是localhost

答案 13 :(得分:5)

Ruby on Rails中,您可以在控制器中执行操作:

headers['Access-Control-Allow-Origin'] = '*'

答案 14 :(得分:5)

您可以在不修改服务器的情况下使其工作,方法是在HTTP OPTIONS的响应中包含标题Access-Control-Allow-Origin: *

在Chrome中,使用this extension。如果您使用Mozilla,请检查this answer

答案 15 :(得分:4)

我们在chrome中测试的phonegap应用程序也存在同样的问题。 在打开Chrome之前,我们每天在批处理文件下面使用一台Windows机器 请记住,在运行此操作之前,您需要从任务管理器清除所有chrome实例,或者您可以选择chrome以不在后台运行。

BATCH :(使用cmd)

cd D:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security

答案 16 :(得分:1)

在Ruby Sinatra

response['Access-Control-Allow-Origin'] = '*' 

适合所有人或

response['Access-Control-Allow-Origin'] = 'http://yourdomain.name' 

答案 17 :(得分:0)

收到请求后,您可以

var origin = (req.headers.origin || "*");

比你必须做出回应的那样:

res.writeHead(
    206,
    {
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': origin,
    }
);