Access-Control-Allow-Origin 不允許 Origin

Question

我正在向Sencha Touch 2 應用程序（包裝在PhoneGap 中）中的遠程 PHP 服務器發出Ajax.request 。

來自服務器的響應如下：

XMLHttpRequest 無法加載http://nqatalog.negroesquisso.pt/login.php 。 Access-Control-Allow-Origin 不允許 Origin http://localhost:8888 。

我該如何解決這個問題？

Answer 1

不久前我寫了一篇關於這個問題的文章， 跨域 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') ?>

Answer 2

如果您無法控制服務器，只需將此參數添加到 Chrome 啟動器： --disable-web-security 。

請注意，我不會將其用於正常的“網上沖浪”。 如需參考，請參閱此帖子： 在 Chrome 中禁用同源策略。

您使用 Phonegap 實際構建應用程序並將其加載到設備上，這不會成為問題。

Answer 3

如果您使用的是 Apache，只需添加：

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

在您的配置中。 這將導致您的網絡服務器的所有響應都可以從互聯網上的任何其他站點訪問。 如果您打算只允許特定服務器使用您主機上的服務，您可以將*替換為原始服務器的 URL：

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

Answer 4

如果您有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>

Answer 5

這是我嘗試使用ASP.NET MVC作為數據源解決相同問題時出現的第一個問題/答案。 我意識到這並不能解決PHP問題，但它足夠有價值。

我正在使用 ASP.NET MVC。 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" );
}

Answer 6

由於 Matt Mombrea 對於服務器端是正確的，您可能會遇到另一個問題，即拒絕白名單。

你必須配置你的 phonegap.plist。 （我使用的是舊版本的phonegap）

對於cordova，命名和目錄可能會有一些變化。 但是步驟應該大致相同。

首先選擇 Supporting files > PhoneGap.plist

然后在“外部主機”下

添加一個條目，其值可能為“ http://nqatalog.negroesquisso.pt ” 我使用 * 僅用於調試目的。

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

Answer 8

這是因為同源策略。 在Mozilla Developer Network或Wikipedia 上查看更多信息。

基本上，在您的示例中，您只需要從nqatalog.negroesquisso.pt而不是localhost加載http://nqatalog.negroesquisso.pt/login.php頁面。

Answer 9

我在使用各種 API 時遇到過幾次這種情況。 通常，快速解決方法是添加“&callback=?” 到字符串的末尾。 有時＆符號必須是字符代碼，有時是“？”：“？callback =？” （請參閱Forecast.io API 與 jQuery 的使用）

Answer 10

我會給你一個簡單的解決方案。 就我而言，我無權訪問服務器。 在這種情況下，您可以更改Google Chrome瀏覽器中的安全策略以允許 Access-Control-Allow-Origin。 這很簡單：

1. 創建 Chrome 瀏覽器快捷方式
2. 右鍵單擊快捷方式圖標 -> 屬性 -> 快捷方式 -> 目標

簡單粘貼到"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" --allow-file-access-from-files --disable-web-security 。

位置可能不同。 現在通過單擊該快捷方式打開 Chrome。

Answer 11

如果您正在編寫 Chrome 擴展程序並收到此錯誤，請確保已將 API 的基本 URL 添加到manifest.json的權限塊，例如：

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

Answer 12

如果你在 apache 下，只需將一個 .htaccess 文件添加到你的目錄中，內容如下：

Header set Access-Control-Allow-Origin: *

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

Header set Access-Control-Allow-Methods: *

Answer 13

如果你在 Angular.js 中得到這個，那么確保你像這樣轉義你的端口號：

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

有關它的更多信息，請參見此處。

Answer 14

在Ruby on Rails 中，您可以在控制器中執行以下操作：

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

Answer 15

您可以通過使瀏覽器在 HTTP OPTIONS 的響應中包含頭Access-Control-Allow-Origin: *來使其工作而無需修改服務器。

在 Chrome 中，使用此擴展程序。 如果您使用 Mozilla，請查看此答案。

Answer 16

我們在 chrome 中測試的 phonegap 應用程序也有同樣的問題。 我們每天在打開 Chrome 之前使用以下批處理文件的一台 Windows 機器。 請記住，在運行此之前，您需要從任務管理器中清除所有 chrome 實例，或者您可以選擇 chrome 不在后台運行。

批處理：（使用cmd）

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

Answer 17

在 Ruby Sinatra

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

為每個人或

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

Answer 18

當您收到請求時，您可以

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

而不是當你必須回應這樣的事情時：

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