JavaScript CORS GET请求被阻止或无效

Question

我已经在向第三方REST Api发出简单的GET请求方面苦苦挣扎了很长时间。 我已经阅读了一些教程和相关问题，但是我无法使其正常工作。 我遇到两个错误之一

飞行前响应无效（重定向）

或（如果通过https）

对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。 因此，不允许访问源' https：// localhost：8433 '。

关于第二条消息：服务器不支持CORS只是一个问题吗？

我的代码：

 var xmlHttp = new XMLHttpRequest(); var url = 'https://inspirehep.net/record/451647?of=recjson&ot=recid,number_of_citations,authors,title'; //http or https, tried both /* doing sth with response here like populate dropdown etc. */ xmlHttp.open('GET', url, true); xmlHttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Cache-Control"); xmlHttp.setRequestHeader("Content-Type", "application/json"); xmlHttp.setRequestHeader("Access-Control-Allow-Origin", '*'); xmlHttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); xmlHttp.setRequestHeader("Access-Control-Allow-Credentials", "true"); xmlHttp.send(); 

整个应用程序都在node.js服务器（本地主机）上运行，并且上面的脚本作为单独的文件包含在.html视图中。

我可以正确地从Web浏览器，提琴手，邮递员等获得JSON响应，以使用此API。 我还尝试了不同的API（例如Openweather API），认为这是服务器配置的问题，但结果是相同的。

感谢您的帮助-也许我只是误解了有关CORS的某些知识。

Answer 1

您无法从浏览器设置标头，如果目标URL在您的服务器或您管理的服务器上运行并且该服务器运行nodejs，则可以使用cors https://www.npmjs.com/package/cors ，但是，如果第三方网址，并且不允许CORS，那么您应该通过配置服务器到第三方服务器之间的代理来从后端发出请求，这样可以解决您的问题。

Answer 2

关于使用nodejs的CORS的答案很可能是正确的，但我想建议您运行测试以确保您的代码也能正常工作。

尝试使用Chrome并下载扩展程序以允许CORS。 这样，您将在尝试正确的解决方案之前先测试功能。

Answer 3

如果您不知道如何使用后端服务，建议您使用Web代理。 Web服务器不受同一原始策略的限制。因此，Web服务器可以从另一个域上的服务器请求数据。 使用此api： http : //cors-anywhere.herokuapp.com/在您的代码中，如下所示

const webProxy="http://cors-anywhere.herokuapp.com/"
const apiKey=`${webProxy}https://inspirehep.net/record/451647?of=recjson&ot=recid,number_of_citations,authors,title`

基本上，此Web代理将从inspirehep.net请求数据，将其托管并传递给您。 CDN就是这样工作的。 CDN托管其他站点可以使用的文件

Answer 4

晚会了...

http://cors-anywhere.herokuapp.com/很棒，但是如果您使用XMLHttpRequest（）和GET方法，则不需要它。 只需排除您的标头请求...

var xhr = new XMLHttpRequest();
xhr.open( "GET", YOURURL );
//OMIT THESE...
  //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  //xhr.withCredentials = true;
  //xhr.setRequestHeader( 'Content-Type', _contenttype );
  //xhr.setRequestHeader( 'CrossDomain', 'true' );
//....

xhr.addEventListener( 'load',  function () {
       xhr.responseJSON = JSON.parse( xhr.responseText );
       alert( xhr.responseJSON);
});

xhr.onerror = function(e) { 
      alert("Ajax request error");
};

xhr.send( JSON.stringify({}) );