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

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

从JavaScript调用外部端点时出现以下错误

来自来源的“null”已被CORS策略阻止：飞行前响应中的访问控制允许标头不允许请求标头字段x-api-key

var url=“尝试设置标题

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");

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

当尝试预发不明确允许的标头时（即，它不包括在服务器发送的访问控制允许标头指定的列表中），会发生此错误。要解决此问题，需要更新服务器，使其允许指定的标头，或者需要避免使用该标头

您可以尝试以下方法：

$.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);
        }

$.ajax({
标题：{“Accept”：“application/json”，“x-api-key”：“}，
键入：“POST”，
url:“”，
跨域：是的，
发送前：函数（xhr）{
xhr.withCredentials=true；
},
成功：功能（数据、文本状态、请求）{
控制台日志（数据）；
}

}))
 @Ravi Makwana看起来很像，但我不确定如何在我的代码中解决它。谢谢@Ravi Makwana，我尝试了它，但现在我得到了这个错误。“来自源代码的'null'已被CORS策略阻止：请求头字段访问控制允许源代码不被飞行前响应中的访问控制允许头所允许。”
$.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);
        }