Table of contents
error message
Let’s first take a look at the error message from the browser console:
Ensure CORS response header values are valid
A cross-origin resource sharing (CORS) request was blocked because of invalid or missing response headers of the request or the associated preflight request .
To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.
Note that if an opaque response is sufficient, the request's mode can be set to no-cors to fetch the resource with CORS disabled; that way CORS headers are not required but the response content is inaccessible (opaque).
Error message translation:
Ensure valid CORS response header values
A Cross-Origin Resource Sharing (CORS) request was blocked because the response header for this request or an associated pre-flight request was invalid or missing. .
To resolve this issue, ensure that responses to CORS requests and/or related pre-flight requests are not missing headers and use valid header values.
Note that if an opaque response is sufficient, you can set the mode of the request to no cors to obtain the resource with cors disabled; this way no CORS headers are required, but the response The content is not accessible (opaque).
Cause Analysis
The error message mentions "Make sure the CORS response header value is valid", so what isCORS?
CORS, the full name is Cross-Origin Resource Sharing, which allows resources (such as html/js/web service) in the current domain (domain) to be shared by other domains (domain). The mechanism for script request access, usually due to the same-origin security policy (the same-origin security policy), browsers will prohibit suchcross-domain requests.
means that we are missing the CORS response header value, or the CORS response header value is invalid. Then we need to start looking for problems with this response header. Let's first explain why there is a CORS response header value. As can be seen from the error message"This does not require the CORS header, but the response content is inaccessible (opaque)" It is necessary, otherwise even if the result is successfully responded, it will not be accessible.
simple request
The browser directly issues a CORS request and adds an Origin field to the request header to indicate which field the request comes from. /span>. This error cannot be identified from the status code because the returned status code will be 200 OK. "No 'Access-Control-Allow-Origin' header is present on the requested resource." field in the response header, it means that the request is not within the permission range and an error will appear in the browser console. Access-Control-Allow-Origin, the server will use this value to determine whether to accept the request. If the browser does not find the Source (request protocol + host name + port number)
In fact, the server will return the request result, but the browser refuses to accept the result.
Then we knowAccess-Control-Allow-OriginThe field is very important, the value of this field is when requesting field value, the requested result can be successfully accepted by the browser. Origin
The value of the Access-Control-Allow-Origin field can be set to *, indicating that requests from any origin are accepted.
Not a simple request
Non-simple requests refer to requests that have special requirements for the server, such as POST requests and PUT requests, or requests where the Content-Type field is application/json.
Preflight request
For non-simple CORS requests, a preflight request will be initiated before the formal request.
That is to say, the browser will first confirm whether the server accepts the request from the source, and only after the server agrees, the browser will issue a formal request.
The request method of preflight request isOPTIONS, and the request header contains Origin a> field is used to specify additional request header fields that the browser will send in CORS requests. Access-Control-Allow-HeadersAccess-Control-Request-Method field, which is used to indicate the type of request that the browser may issue next; Access-Control-Request-Method field, indicating which source it comes from. In addition, the preflight request must also have the
request response
For this, the server must give the browser the desired result in response to the preflight request, otherwise the browser will not make a formal request to the server.
The backend can set response headers in filters or interceptors, as follows:
response.setHeader("Access-control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,PATCH");
response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));After the preflight request passes, the formal request sent by the browser is the same as a simple request. The browser will add an Origin field to the request header, and the server will add Access- to the response header. Control-Allow-Originfield.