問題描述

我正在研究我的這個個人項目只是為了好玩，我想讀取一個位于 http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml 并解析 xml 并使用它來轉(zhuǎn)換貨幣之間的值.

I am working on this personal project of mine just for fun where I want to read an xml file which is located at http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml and parse the xml and use it to convert values between the currencies.

到目前為止，我已經(jīng)想出了下面的代碼，這是為了讀取 XML 非常基本的代碼，但是我收到了以下錯誤.

So far I have come up with the code below which is pretty basic in order to read the XML but I get the following error.

XMLHttpRequest 無法加載 ****.沒有訪問控制允許來源"請求的資源上存在標頭.起源'http://run.jsbin.com' 因此不允許訪問.

XMLHttpRequest cannot load ****. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.com' is therefore not allowed access.

$(document).ready( 
    function() {     
        $.ajax({          
            type:  'GET',
            url:   'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
            dataType: 'xml',              
            success: function(xml){
                alert('aaa');
            }
         });
    }
);

我沒有發(fā)現(xiàn)我的代碼有任何問題，所以我希望有人能指出我的代碼有什么問題以及如何修復它.

I don't see anything wrong with my code so I am hoping someone could point out what I am doing wrong with my code and how I could fix it.

推薦答案

您將無法對 http://www.ecb.europa.eu/stats/eurofxref/eurofxref- 進行 ajax 調(diào)用由于 http://run.jsbin.com 的文件中的 daily.xmlorigin_policy" rel="noreferrer">同源策略.

You won't be able to make an ajax call to http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml from a file deployed at http://run.jsbin.com due to the same-origin policy.

由于源(又名 origin)頁面和 target URL 位于不同的域(run.jsbin.com 和 www.ecb.europa.eu)，您的代碼實際上是在嘗試制作 跨域(CORS)請求，不是普通的GET.

As the source (aka origin) page and the target URL are at different domains (run.jsbin.com and www.ecb.europa.eu), your code is actually attempting to make a Cross-domain (CORS) request, not an ordinary GET.

簡而言之，同源策略表示瀏覽器應該只允許對 HTML 頁面的同一域中的服務進行 ajax 調(diào)用.

In a few words, the same-origin policy says that browsers should only allow ajax calls to services at the same domain of the HTML page.

http://www.example.com/myPage.html 的頁面只能直接請求 http://www.example.com 的服務，例如 http://www.example.com/api/myService.如果服務托管在另一個域(例如 http://www.ok.com/api/myService)，瀏覽器將不會直接調(diào)用(如您所料).相反，它將嘗試發(fā)出 CORS 請求.

A page at http://www.example.com/myPage.html can only directly request services that are at http://www.example.com, like http://www.example.com/api/myService. If the service is hosted at another domain (say http://www.ok.com/api/myService), the browser won't make the call directly (as you'd expect). Instead, it will try to make a CORS request.

簡而言之，要跨不同域執(zhí)行 (CORS) 請求*，您的瀏覽器:

To put it shortly, to perform a (CORS) request* across different domains, your browser:

• 將在原始請求中包含 Origin 標頭(以頁面的域為值)并照常執(zhí)行；然后
• 僅當服務器響應該請求包含 足夠的標題(Access-Control-Allow-Origin 是 其中一個) 允許 CORS 請求，瀏覽將完成調(diào)用(幾乎**與 HTML 頁面在同一個域中的方式完全相同).
  • 如果沒有出現(xiàn)預期的標頭，瀏覽器就會放棄(就像它對您所做的那樣).
  • Will include an Origin header in the original request (with the page's domain as value) and perform it as usual; and then
  • Only if the server response to that request contains the adequate headers (Access-Control-Allow-Origin is one of them) allowing the CORS request, the browse will complete the call (almost** exactly the way it would if the HTML page was at the same domain).
    • If the expected headers don't come, the browser simply gives up (like it did to you).

    
    _{* 上面描述了簡單請求中的步驟，例如沒有花哨的標頭的常規(guī)GET.如果請求不簡單(如 POST 以 application/json 作為內(nèi)容類型)，瀏覽器將等待它片刻，并在完成之前先發(fā)送對目標 URL 的 OPTIONS 請求.像上面一樣，只有當對這個 OPTIONS 請求的響應包含 CORS 標頭時，它才會繼續(xù).此 OPTIONS 調(diào)用稱為 preflight 請求.
    ** 我說幾乎是因為常規(guī)調(diào)用和 CORS 調(diào)用之間還有其他區(qū)別.一個重要的問題是，即使響應中存在某些標頭，也不會如果它們未包含在 Access-Control-Expose-Headers 標頭中，則由瀏覽器拾取.}

    
    _{* The above depicts the steps in a simple request, such as a regular GET with no fancy headers. If the request is not simple (like a POST with application/json as content type), the browser will hold it a moment, and, before fulfilling it, will first send an OPTIONS request to the target URL. Like above, it only will continue if the response to this OPTIONS request contains the CORS headers. This OPTIONS call is known as preflight request.
    ** I'm saying almost because there are other differences between regular calls and CORS calls. An important one is that some headers, even if present in the response, will not be picked up by the browser if they aren't included in the Access-Control-Expose-Headers header.}

    
    

    只是一個錯字嗎? 有時 JavaScript 代碼在目標域中只是一個錯字.你檢查過嗎?如果頁面位于 www.example.com，它只會定期調(diào)用 www.example.com！其他 URL，例如 api.example.com 甚至 example.com 或 www.example.com:8080 被視為 不同 域由瀏覽器！是的，如果端口不同，那就是不同的域！

    Was it just a typo? Sometimes the JavaScript code has just a typo in the target domain. Have you checked? If the page is at www.example.com it will only make regular calls to www.example.com! Other URLs, such as api.example.com or even example.com or www.example.com:8080 are considered different domains by the browser! Yes, if the port is different, then it is a different domain!

    添加標頭.啟用 CORS 的最簡單方法是添加必要的標頭(如 Access-Control-Allow-Origin)到服務器的響應.(每種服務器/語言都有辦法做到這一點 - 在此處查看一些解決方案.)

    Add the headers. The simplest way to enable CORS is by adding the necessary headers (as Access-Control-Allow-Origin) to the server's responses. (Each server/language has a way to do that - check some solutions here.)

    不得已:如果您沒有服務器端訪問該服務的權限，您也可以鏡像它(通過反向代理等工具)，并包括那里所有必要的標題.

    Last resort: If you don't have server-side access to the service, you can also mirror it (through tools such as reverse proxies), and include all the necessary headers there.

    這篇關于jQuery XML 錯誤“請求的資源上不存在‘Access-Control-Allow-Origin’標頭."的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

    【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權益，請聯(lián)系我們刪除處理，感謝您的支持！