1. Error prompt
下载的时候报错:Access to XMLHttpRequest at 'http://127.0.0.1:10667/admin/sys/generator/code' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Two, analysis ideas
1. When I first encountered this problem, I thought it was the back-end reason, and kept fiddle with the back-end. Baidu learned to understand and found that it was not a back-end problem. At this time, the brain cells were not enough. .
2. Take a break and use full power. A very old-fashioned search method is to translate the sentence that is wrong, as follows:
Previously , the value of the "Access-Control-Allow-Origin" header in the response must not be a wildcard "*" . After translation, it was found that XMLHttpRequest was also involved in blocking, so the credential mode of the request initiated by XMLHttpRequest was set by withCredentials Property control to search, and finally found that the colleague configured this when building the project:
axios.defaults.withCredentials = true;
So I changed it to
axios.defaults.withCredentials = false;
Perfectly solve the front-end display cross-domain problem.
note:
(1) When configuring the front-end withCredentials=true
, the back-end configuration Access-Control-Allow-Origin
cannot be *
, it must be the corresponding address
(2) When configuring withCredentials=true
, the backend needs to be configuredAccess-Control-Allow-Credentials
(3) When the front end configures the request header, the back end needs to be configured Access-Control-Allow-Headers
as the corresponding request header set
Three, related code
// 封装下载请求的方式 ,来源于 api.js
function download(url, params) {
let loadUrl = BASE_URL + url;
return axios.post(loadUrl, params, { responseType:'blob' });
}
// 具体的业务请求
handleSubmit(formName){
if (!this.selectTable) {
return;
}
this.generatorForm.tables = this.selectTable;
let params = this.generatorForm;
this.$refs[formName].validate((valid) => {
if (valid) {
this.api.generatorCode(params).then(response =>{
if (response === 'undefined'){
return;
}
console.log("response====",response);
let url = window.URL.createObjectURL(new Blob([response.data]));
let link= document.createElement('a');
link.style.display='none';
link.href=url;
link.setAttribute('download', 'source-code.zip');
document.body.appendChild(link);
link.click();
});
}
});
},
Four, back-end cross-domain processing
Set the response body, such as HttpServletResponse response:
response.setHeader("Access-Control-Allow-Origin","*");
Based on springboot development, add on contronler: @CrossOrigin
Five, other
What this article just wants to say is that when you encounter a problem, you don't necessarily look for clues based on the primary error code. Sometimes the countdown sentences will make you shocked.
Involved technologies: axios, http cross-domain, back-end cross-domain
Study articles: https://juejin.im/post/5c2490ba6fb9a049ff4e2eca