XMLHttpRequest работает на консоли, но при использовании в теге скрипта как файл js показывает ошибку CORS

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, но у меня есть min.js с использованием спектрально-es2015-модули-UMD. я включил этот файл в клиентском проекте

Когда я называю

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. 

Но когда я сделать то же самое с консоли отладчика хромовой формы домена 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 это вызывает CORS «предполетный» - запрос OPTIONS, который должен быть обработаны сервером

В этом случае сервер явно не обрабатывает запросы OPTIONS, что приводит к нет ответа доступа-разрешения-источника в ответе, убивая запрос

Нет необходимости устанавливать этот заголовок, особенно в запросе GET (вы не отправляете какой-либо контент, поэтому зачем указывать тип содержимого?)

Удаляемая линия

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

Браузер не будет отправлять предполетной запрос, поэтому API должен вести себя, как ожидалось

в зависимости от ответа, вы, возможно, хотели overrideMimeType() метода, чтобы переопределить ответ типа пантомимы - однако, так как запрос работ в консоли, вам, вероятно, это не понадобится