Question

我正在使用JavaScript。

这是我的代码

const BASE_URL = "https://example.com/api";
export class BankApi {

    constructor(XMLHttpRequest){
        this.xhr = XMLHttpRequest;
    }

    getBankList(callback){
        this.xhr.open("GET", BASE_URL+"/listbanks", true);
        this.xhr.setRequestHeader('Content-Type', 'application/json');
        this.xhr.send(null);
        this.xhr.onreadystatechange = function(){
            if (this.readyState != 4) return;

            if (this.status == 200) {
                var data = JSON.parse(this.responseText);
                callback(data);
            }
        };
    }
}

我已经在ES6中编写了代码但是我使用了transform-es2015-modules-umd的min.js。我已将此文件包含在客户端项目中

当我打电话

var bankApi = new BankApi(new XMLHttpRequest());
bankApi.getBankList(function(data){
    console.log(data);
})

我收到错误

XMLHttpRequest cannot load https://example.com/api/listbanks. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://engineeringqna.com' is therefore not allowed access.

但是当我从chrome form https://engineeringqna.com域的调试器控制台执行相同操作时没有错误。

var xhr = new XMLHttpRequest();
xhr.open("GET","https://example.com/api/listbanks",true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function(){
if (xhr.readyState == 4)
    {
      if (xhr.status == 200) {
          console.log(data);
      }
      else {
        alert("xhr Errors Occured");
      }
    }
}
xhr.send(null);

没有错误。我在控制台中获取数据。有人可以解释一下这里发生了什么吗？

谢谢。

Answer 1

当您将content-type设置为application/json时，会触发一个角色＆＃34;预检＆＃34; - OPTIONS请求，必须由服务器处理

在这种情况下，服务器显然没有处理OPTIONS请求，导致响应中没有access-control-allow-origin，导致请求被终止

没有必要设置该标头，尤其是在GET请求中（您没有发送任何内容，所以为什么要指定内容类型？）

删除行

this.xhr.setRequestHeader('Content-Type', 'application/json');

浏览器不会发送预检请求，因此API的行为应符合预期

取决于响应，您可能希望overrideMimeType()方法覆盖响应mime类型 - 但是，由于请求在控制台中有效，您可能不需要此

XMLHttpRequest在控制台上工作，但在脚本标记中使用时，js文件显示CORS错误

1 个答案: