Междоменная проблема браузера Access-Control-Allow-Headers

JavaScript

Access-Control-Allow-Headers

Когда возникает междоменная проблема, когда браузер отправляет запрос интерфейса, текущая практика обычно добавляет следующую конфигурацию на интерфейсный сервер.

Access-Control-Allow-Origin: *

Но иногдаAccess-Control-Allow-Headersпроблема с ошибкой.

Access to XMLHttpRequest at 'http://www.xxx.com/api' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Давайте проанализируем причины и решения ниже.

причина

Когда браузер отправляет запрос с перекрестным доменом и включает в себя поле пользовательского заголовка, браузер сначала отправит запрос на предварительную ставку параметров на сервер, чтобы обнаружить, допускает ли служба запроса на пользовательские полей для перекрестных доменных данных.

Если разрешено, продолжайте выполнять запросы POST и GET, иначе верните сообщение об ошибке.

ВАРИАНТЫ запроса:

Request URL:http://xxx.com/api  
Request Method:OPTIONS  
Status Code:200 OK  
Remote Address:00.00.00.00:80  
Referrer Policy:no-referrer-when-downgrade

Request Header:

Accept:*/*  
Accept-Encoding:gzip, deflate  
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8  
Access-Control-Request-Headers:content-type,xfilecategory,xfilename,xfilesize  
Access-Control-Request-Method:GET  
Connection:keep-alive  
Host:http://localhost:8080/  
Origin:http://localhost:8080/  
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

Внимание ⚠️

В этот момент браузер отправит на сервер предварительный запрос с вопросом, поддерживать ли междоменные настраиваемые поля заголовков. задаватьAccess-Control-Request-HeadersСервер должен реагировать соответствующим образом.

ответ сервера

Сервер должен ответить на запрос OPTIONS, установив заголовок, содержащийAccess-Control-Request-Headersи включает запрос OPTIONSAccess-Control-Request-Headersпарное значение.

Например:

response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");

Также (на самом деле важно)

Предварительный запрос не будет отправлен, если ваш запрос состоит из простых заголовков.

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type

При включении только этих заголовков запроса, указанных выше (и значений, которые удовлетворяют дополнительным требованиям, перечисленным ниже), запросу не нужно отправлять предварительный запрос в контексте CORS.

Дополнительные требования

CORS-безопасный заголовок также должен соответствовать следующим требованиям, чтобы быть CORS-безопасным заголовком запроса:

  • дляAccept-Languageа такжеContent-Language: могут существовать только значения0-9,A-Z,a-z, пробел или*,=.;=.
  • оAcceptа такжеContent-Type: НЕ ДОЛЖЕН содержать байты заголовка запроса, небезопасные для CORS:"():<>?@[\]{},Delete,Tabи управляющие символы:0x00прибыть0x19.
  • Content-Type: Требуется значение типа MIME (параметр игнорируется). возможноapplication/x-www-form-urlencoded,multipart/form-dataилиtext/plainлюбой из .
  • для любогоheader: Длина значения не может быть больше 128.

Обычно влияет на программу, чтобы отправить предварительный запрос всегдаContent-Typeпараметр. Если нам не нужно отправлять предварительный запрос при выполнении междоменного запроса, то мы можем установить запрос браузераContent-Typeдляapplication/x-www-form-urlencoded,multipart/form-dataилиtext/plainлюбой из них, чтобы избежать.

Например:

headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

Ссылаться на

developer.Mozilla.org/this-cn/docs/… developer.Mozilla.org/en-US/docs/… stackoverflow.com/questions/2…

Категории