Article directory
1. Problem discovery
Error content:
p://localhost:8001/user/login’ from origin ‘http://localhost:3001’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Front-end and back-end separation projects:
Frontend: Vue3-Element-Admin
Backend: Spring Cloud
The backend interface has been written, and it is normal to use postman to detect it.
However, after building the front-end project, an error is reported for data transmission:
2. Problem solving process
At first, it was suspected to be a front-end policy issue. After checking, the domain name of the backend interface was also changed and all requests were released.
proxy: {
'/api': {
target: '*',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
Or the error is as follows:
2.1 Ask the AI result
This error message is because in the cross-domain request, the withCredentials parameter is set to true in the request header, which means that the cross-domain request needs to use credentials (such as cookies, HTTP authentication, etc.). In the response header, the value of Access-Control-Allow-Origin cannot be a wildcard *, but must be a specific domain name.
You can try to set the value of Access-Control-Allow-Origin in the response header of the backend server to the domain name of the frontend application, for example:
Access-Control-Allow-Origin: http://localhost:3001
This will solve the error problem.
In addition, if you need to carry cookies or other credentials when sending cross-domain requests, you also need to set the withCredentials parameter to true in the request header. for example:
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://example.com/api');
xhr.send();
Or set the credentials parameter to 'include' when using Fetch to send the request. for example:
fetch('http://example.com/api', {
credentials: 'include'
});
But this answer doesn't solve my problem.
2.2 Problem Solving
The backend Spring wrote @CrossOrigin, but still can't solve the problem.
I found that the withCredentials parameter is set to true in the request header of the front end.
The backend also needs to configure the corresponding
@CrossOrigin(origins = "http://localhost:3001", allowCredentials = "true")
The allowed domain name here can be written as allow all.
@CrossOrigin(origins = “*”, allowCredentials = “true”)
So request again and the problem is solved.
3. Knowledge points
The value set in the response header of the backend server can be set to true using @CrossOriginannotations Access-Control-Allow-Credentials. In Spring Boot, @CrossOriginannotations to easily implement cross-domain support, and at the same time support setting whether to allow the use of credentials.
For example, using @CrossOriginannotations can be achieved in the following ways:
@RestController
@CrossOrigin(origins = "http://localhost:3001", allowCredentials = "true")
public class MyController {
@GetMapping("/my-api")
public String myApi() {
return "Hello World";
}
}
In the above code, we added @CrossOriginannotations , set originsto the domain name of the front-end application, and allowCredentialsset to true to allow the use of credentials.
It should be noted that using @CrossOriginannotations only applies to cross-domain support for a single controller or method. If you need to configure cross-domain support globally, you should use the method mentioned in the previous answer and set it in the configuration class CorsConfigurationSource.
allowCredentialsis an option in CORS that indicates whether to allow sending and receiving credentials in cross-origin requests. Credentials can be sensitive information such as cookies, HTTP authentication information (such as authentication using Basic, Digest, or NTLM methods), or TLS client certificates.
If allowCredentialsset true, the credentials included in the client request will be sent to the server, and Access-Control-Allow-Credentialsthe header will be set true. In this way, sensitive information can be carried and received in cross-origin requests.