在香草中使用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

回答

相关问题