Не пытайтесь получить ошибку "Access-Control-Allow-Origin" с XMLHttpRequest

Я бы решил эту проблему с помощью функции jQuery $.ajax, но в этом случае jQuery не является опцией. Вместо этого я иду с запросом CORS. Я чувствую, что что-то не так с веб-сервером, который отвечает на запрос, и мне сложно понять, в чем проблема.

Вот мой код для создания запроса CORS

var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');
httpRequest.setRequestHeader( 'Content-Type', 'application/json' );
httpRequest.onerror = function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( 'The data failed to load :(' );
  console.log(JSON.stringify(XMLHttpRequest));
};
httpRequest.onload = function() {
  console.log('SUCCESS!');
}

Вот ошибка console.log:

XMLHttpRequest не может загрузить http://test.testhost.com/testpage. Поле заголовка запроса Access-Control-Allow-Origin не допускается Access-Control-Allow-Headers.

Вот информация заголовка:

> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK

Заголовок запроса:

OPTIONS /content-network HTTP/1.1
Host: test.testhost.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: POST
Origin: http://test.testdomain.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, content-type
Accept: */*
Referer: http://test.testdomain.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Заголовки ответов:

HTTP/1.1 200 OK
Date: Thu, 14 Aug 2014 20:17:25 GMT
Server: Apache
Last-Modified: Thu, 14 Aug 2014 20:17:25 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1408047445"
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Vary: Accept-Encoding
Content-Encoding: gzip
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Content-Length: 6117
Connection: close
Content-Type: text/html; charset=utf-8

Ответ 1

Ответ вашего сервера позволяет запросить включить три специальных не простых заголовка:

Access-Control-Allow-Headers:origin, x-requested-with, content-type

но ваш запрос имеет заголовок, который не разрешен ответом сервера:

Access-Control-Request-Headers:access-control-allow-origin, content-type

Все непростые заголовки, отправленные в запросе CORS, должны быть явно разрешены заголовком ответа Access-Control-Allow-Headers. Необязательный заголовок Access-Control-Allow-Origin, отправленный в ваш запрос, не разрешен ответом сервера CORS. Это именно то, о чем вам сообщалось сообщение об ошибке "... не разрешено Access-Control-Allow-Headers".

Нет причин для запроса иметь этот заголовок: он ничего не делает, потому что Access-Control-Allow-Origin является заголовком ответа, а не заголовком запроса.

Решение. Удалите вызов setRequestHeader, который добавляет заголовок Access-Control-Allow-Origin к вашему запросу.

Ответ 2

Удалить

httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');

... и добавьте:

httpRequest.withCredentials = false;

Ответ 3

В дополнение к вашей проблеме CORS сервер, к которому вы пытаетесь получить доступ, имеет базовую аутентификацию HTTP. Вы можете включить учетные данные в свой междоменный запрос, указав учетные данные в URL-адресе, который вы передаете XHR:

url = 'http://username:[email protected]/testpage'