問(wèn)題描述

我嘗試在 jQuery AJAX 請(qǐng)求中發(fā)送 GET 請(qǐng)求.

I attempt to send a GET request in a jQuery AJAX request.

$.ajax({
    type: 'GET',
    url: /* <the link as string> */,
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); },
});

但是，無(wú)論我嘗試過(guò)什么，我都得到 XMLHttpRequest 無(wú)法加載 <page>.請(qǐng)求的資源上不存在Access-Control-Allow-Origin"標(biāo)頭.因此不允許訪問(wèn) Origin 'http://localhost:7776'.

However, whatever I've tried, I got XMLHttpRequest cannot load <page>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7776' is therefore not allowed access.

我嘗試了所有方法，從將 header : {} 定義添加到 AJAX 請(qǐng)求到將 dataType 設(shè)置為 JSONP，甚至是 text/plain，使用簡(jiǎn)單的 AJAX 而不是 jQuery，甚至下載啟用 CORS 的插件 - 但沒(méi)有任何幫助.

I tried everything, from adding header : {} definitions to the AJAX request to setting dataType to JSONP, or even text/plain, using simple AJAX instead of jQuery, even downloading a plugin that enables CORS - but nothing could help.

如果我嘗試訪問(wèn)任何其他網(wǎng)站，也會(huì)發(fā)生同樣的情況.

And the same happens if I attempt to reach any other sites.

對(duì)于適當(dāng)且簡(jiǎn)單的解決方案有任何想法嗎?有嗎?

Any ideas for a proper and simple solution? Is there any at all?

推薦答案

這是設(shè)計(jì)使然.您不能使用 XMLHttpRequest 向另一臺(tái)服務(wù)器發(fā)出任意 HTTP 請(qǐng)求，除非該服務(wù)器通過(guò)為請(qǐng)求主機(jī)提供 Access-Control-Allow-Origin 標(biāo)頭來(lái)允許它.

This is by design. You can't make an arbitrary HTTP request to another server using XMLHttpRequest unless that server allows it by putting out an Access-Control-Allow-Origin header for the requesting host.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

您可以在腳本標(biāo)簽中檢索它(對(duì)腳本、圖像和樣式表沒(méi)有相同的限制)，但除非返回的內(nèi)容是腳本，否則對(duì)您沒(méi)有多大用處.

You could retrieve it in a script tag (there isn't the same restriction on scripts and images and stylesheets), but unless the content returned is a script, it won't do you much good.

這里有一個(gè)關(guān)于 CORS 的教程:

Here's a tutorial on CORS:

http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

這一切都是為了保護(hù)最終用戶.假設(shè)圖像實(shí)際上是圖像，樣式表只是樣式表，腳本只是腳本，從另一臺(tái)服務(wù)器請(qǐng)求這些資源不會(huì)真正造成任何傷害.

This is all done to protect the end user. Assuming that an image is actually an image, a stylesheet is just a stylesheet and a script is just a script, requesting those resources from another server can't really do any harm.

但總的來(lái)說(shuō)，跨域請(qǐng)求可能會(huì)做一些非常糟糕的事情.假設(shè)您，Zoltan，正在使用coolsharks.com.還要說(shuō)您已登錄 mybank.com，并且您的瀏覽器中有一個(gè) mybank.com 的 cookie.現(xiàn)在，假設(shè)coolsharks.com 向mybank.com 發(fā)送了一個(gè)AJAX 請(qǐng)求，要求將您的所有資金轉(zhuǎn)入另一個(gè)帳戶.因?yàn)槟鎯?chǔ)了 mybank.com cookie，所以他們成功完成了請(qǐng)求.所有這一切都是在您不知情的情況下發(fā)生的，因?yàn)闆](méi)有發(fā)生頁(yè)面重新加載.這是允許一般跨站點(diǎn) AJAX 請(qǐng)求的危險(xiǎn).

But in general, cross-origin requests can do really bad things. Say that you, Zoltan, are using coolsharks.com. Say also that you are logged into mybank.com and there is a cookie for mybank.com in your browser. Now, suppose that coolsharks.com sends an AJAX request to mybank.com, asking to transfer all your money into another account. Because you have a mybank.com cookie stored, they successfully complete the request. And all of this happens without your knowledge, because no page reload occurred. This is the danger of allowing general cross-site AJAX requests.

如果要執(zhí)行跨站請(qǐng)求，有兩種選擇:

If you want to perform cross-site requests, you have two options:

1. 將您發(fā)出請(qǐng)求的服務(wù)器獲取到
   一個(gè).通過(guò)發(fā)布包含您(或 *)的 Access-Control-Allow-Origin 標(biāo)頭來(lái)承認(rèn)您
   灣.為您提供 JSONP API.

或

1. 編寫(xiě)自己的瀏覽器，不遵循標(biāo)準(zhǔn)，沒(méi)有限制.

在 (1) 中，您必須與您正在向其發(fā)出請(qǐng)求的服務(wù)器合作，并且在 (2) 中，您必須能夠控制最終用戶的瀏覽器.如果你不能滿足 (1) 或 (2)，那你就很不走運(yùn)了.

In (1), you must have the cooperation of the server you are making requests to, and in (2), you must have control over the end user's browser. If you can't fulfill (1) or (2), you're pretty much out of luck.

但是，還有第三種選擇(charlietfl 指出).您可以從您控制的服務(wù)器發(fā)出請(qǐng)求，然后將結(jié)果傳回您的頁(yè)面.例如

However, there is a third option (pointed out by charlietfl). You can make the request from a server that you do control and then pass the result back to your page. E.g.

<script>
$.ajax({
    type: 'GET',
    url: '/proxyAjax.php?url=http%3A%2F%2Fstackoverflow.com%2F10m',
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); }
});
</script>

然后在您的服務(wù)器上，最簡(jiǎn)單:

And then on your server, at its most simple:

<?php
// proxyAjax.php
// ... validation of params
// and checking of url against whitelist would happen here ...
// assume that $url now contains "http://stackoverflow.com/10m"
echo file_get_contents($url);

當(dāng)然，這種方法可能會(huì)遇到其他問(wèn)題:

Of course, this method may run into other issues:

• 您作為代理的網(wǎng)站是否需要正確的引薦來(lái)源網(wǎng)址或特定 IP 地址?
• 是否需要將 cookie 傳遞到目標(biāo)服務(wù)器?
• 您的白名單是否足以保護(hù)您免于提出任意請(qǐng)求?
• 當(dāng)您的服務(wù)器收到它們時(shí)，您會(huì)將哪些標(biāo)頭(例如修改時(shí)間等)傳遞回瀏覽器，您會(huì)忽略或更改哪些標(biāo)頭?
• 您的服務(wù)器是否會(huì)被牽連提出非法請(qǐng)求(因?yàn)槟谴??

我確定還有其他人.但是，如果這些問(wèn)題都沒(méi)有阻止它，那么第三種方法可以很好地工作.

I'm sure there are others. But if none of those issues prevent it, this third method could work quite well.

這篇關(guān)于AJAX 請(qǐng)求獲取“請(qǐng)求的資源上不存在‘Access-Control-Allow-Origin’標(biāo)頭"；錯(cuò)誤的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！