Front-end cross-domain problem based on vue development Access-Control-Allow-Origin

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-Origincannot 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-Headersas 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