Access-Control-Allow-Headers

Current practice typically adds the following configuration to the interface server when the browser has cross-domain problems sending interface requests.

Access-Control-Allow-Origin: *
Copy the code

However, access-Control-allow-headers errors can sometimes occur.

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.
Copy the code

Let’s take a look at the reasons and solutions.

why

When a browser sends a cross-domain request that contains a custom header field, the browser first sends an OPTIONS Preflight Request to the server to determine whether the request service allows custom cross-domain fields.

If yes, continue to execute the POST and GET requests; otherwise, an error message is displayed.

The OPTIONS request:

Request URL:http://xxx.com/api Request Method:OPTIONS Status Code:200 OK Remote Address: 00.00.00.00.00.80 Referrer Policy:no-referrer-when-downgradeCopy the code

Request Header:

Accept:*/* Accept-Encoding:gzip, deflate Accept-Language:zh-CN,zh; Q = 0.9, en. Q = 0.8 Access - Control - Request - Headers: the content-type, xfilecategory, xfilename, xfilesize Access - Control - Request - Method: GET Origin: Connection: keep - the alive Host: http://localhost:8080/ http://localhost:8080/ the 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.1Copy the code

Note ⚠ ️

The browser sends a pre-check request to the server asking if custom header fields across domains are supported. The access-Control-request-headers server needs to respond appropriately.

Server Reply Mode

The server needs to respond to the OPTIONS Request by setting the header to contain access-Control-request-headers and the access-Control-request-HEADERS pair from the OPTIONS Request.

Such as:

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

Plus (it’s important)

You will not send a precheck request if the request is simple Headers.

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

When only these headers are included (along with values that satisfy the additional requirements listed below), the request does not need to send a precheck request in the context of CORS.

Additional requirements

A CORS security header must also meet the following requirements to be a CORS security request header:

  • forAccept-Language 和 Content-Language: Only values can exist0-9.A-Z.a-z, space or*,=.;=.
  • aboutAccept 和 Content-Type: cannot contain CORS unsafe request header bytes:"() : < >? @ [\] {}.Delete.TabAnd control characters:0x00 到 0x19.
  • Content-Type: Requires a value of MIME type (ignoring arguments). Can beapplication/x-www-form-urlencoded,multipart/form-data 或 text/plainAny one of them.
  • For anyheader: The length cannot be greater than 128.

It’s always the content-Type setting that affects your application’s ability to send precheck requests. If we don’t need to send precheck requests when making cross-domain requests, This can be avoided by setting the browser to request a Content-type of application/ X-www-form-urlencoded, multipart/form-data, or Text /plain.

Such as:

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

reference

Developer.mozilla.org/zh-CN/docs/… Developer.mozilla.org/en-US/docs/… Stackoverflow.com/questions/2…