在香草中使用XMLHttpRequest而不使用JSONP克服CORS JavaScript

感謝您花時間閱讀我的問題！在香草中使用XMLHttpRequest而不使用JSONP克服CORS JavaScript

我花了幾天試圖解決一個AJAX請求問題。在閱讀堆棧溢出的幾十個答案後，我似乎無法找到解決方案。請幫忙。

我正在嘗試使用XMLHttpRequest方法使用vanilla JavaScript從Dark Sky提供的API接收JSON格式的數據。這是我試圖發送我的請求的URI（在這裏暴露我的密鑰不是問題）Link to a sample API request

問題是我不斷收到一個CORS錯誤。以前，我用JSONP請求解決了這個問題，但是這次我想了解是否有避免使用JSONP的方法。

我試過使用標題，並刪除控制檯中的CORS錯誤。但是，在響應中，請求後沒有數據發送。這是瀏覽器使得沒有導致一個錯誤CORS任何頭請求：

function CallAjax() { 

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://api.darksky.net/forecast/166731d8eab28d33a26c5a51023eff4c/43.11201,-79.11857", true); 
xhr.onload = function() { 
    console.log(xhr.responseText); 
    alert("sucuess"); 
}; 
xhr.send(); 
} 

CallAjax();

有沒有一種方法，使一個API的調用不會自動與標題「訪問控制 - 允許 - 響應Origin「，」http://localhost:9000/「還是帶有一個可以防止CORS錯誤幷包含響應的JSON數據的頭文件？

非常感謝您的幫助！

來源

2016-11-10 Ignat Ospadov

你控制API的服務器端？如果您在添加標題時遇到問題，請添加該代碼。 –

我無法控制API服務器。 –

CORS旨在限制對第三方API的訪問。如果API不允許你調用它，你應該被瀏覽器拒絕。這就是整個問題。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – tiblu

在進一步研究之後，似乎有兩種方法可以在從不允許跨源請求的API請求數據時克服CORS錯誤。

製作一個服務器端腳本，用於從API請求數據，然後將該數據提供給瀏覽器。
使用API代理服務，該服務使用不觸發CORS錯誤的適當頭進行響應。

來源

2016-11-10 21:50:03

使用fetch（）。它默認處理CORS併爲我節省了很多麻煩。下面是一個例子：

fetch(url, { 
 
    method: 'post', 
 
    headers: { 
 
     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
 
    }, 
 
    body: JSON.stringify({foo:bar}) 
 
    }) 
 
    .then(function (resp){ 
 
    return resp.json() 
 
    }) 
 
    .then(function (data) { 
 
    console.log('Request succeeded with JSON response', data); 
 
    }) 
 
    .catch(function (error) { 
 
    console.log('Request failed', error); 
 
    });

來源

2017-12-02 13:46:54

在香草中使用XMLHttpRequest而不使用JSONP克服CORS JavaScript

回答

相關問題