使用javascript调用外部api端点时出错答案

【问题标题】：Getting Error while calling external api end point using javascript使用javascript调用外部api端点时出错
【发布时间】：2019-12-25 05:08:46
【问题描述】：

我是 JavaScript 新手，我正在尝试从 JavaScript 发送 api 请求。

我在从 JavaScript 调用外部端点时遇到错误。

CORS 策略已阻止来自原点“null”：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 x-api-key。

var url = "<external_api_for_graphQl"
var api_key = "<api_key>"

var xhr = new XMLHttpRequest();

xhr.open("POST", url, false);
xhr.setRequestHeader("x-api-key", api_key);


xhr.send("");
alert(xhr.status);

知道如何解决这个问题吗？谢谢

【问题讨论】：

@Ravi Makwana 它看起来很相似，但我不确定如何在我的代码中解决它。

标签： javascript

【解决方案1】：

尝试设置标题

xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhr.setRequestHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
xhr.setRequestHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

【讨论】：

谢谢@Ravi Makwana 我试过了，但现在我收到了这个错误。“来自原点'null'已被CORS策略阻止：请求标头字段访问控制允许来源不允许预检响应中的 Access-Control-Allow-Headers。"

【解决方案2】：

Access-Control-Allow-Headers 标头由服务器发送，让客户端知道它支持哪些标头用于 CORS 请求。 Access-Control-Allow-Headers 的值应该是逗号分隔的标头名称列表，例如 "X-Custom-Information" 或任何标准但非基本的标头名称（始终允许） .

当尝试预检未明确允许的标头时会发生此错误（即，它不包含在服务器发送的 Access-Control-Allow-Headers 标头指定的列表中） .要解决此问题，需要更新服务器以允许指定的标头，或者您需要避免使用该标头。

你可以试试这个：

$.ajax({
        headers: { "Accept": "application/json", "x-api-key":"<x-api-key>"},
        type: 'POST',
        url: '<external_api_for_graphQl>',
        crossDomain: true,
        beforeSend: function(xhr){
            xhr.withCredentials = true;
      },
        success: function(data, textStatus, request){
            console.log(data);
        }

});

【讨论】：