On the problem that axios cannot bring cookie when making cross-domain requests under vue

I know that there are a lot of questions on the Internet, and I have tried a lot of methods, but I still can"t find out what the problem is.

1. In vue, when a cross-domain request is made through axios, the cookie returned by the server cannot be set. As a result, each time the backend obtains a new session, the login status cannot be maintained.

address of the server my local address

the requested service is http://172.11.4.39:8080/layout/list

vue projects use webpack http://localhost:9527

axios version is 0.17.1 axios is the same version in html tested separately below

2,
Cross-domain settings of java backend

 res.setContentType("text/html;charset=UTF-8");  
 res.setHeader("Access-Control-Allow-Origin", "http://localhost:9527");  
 res.setHeader("Access-Control-Allow-Credentials", "true");  
 res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
 res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");

axios request code:

 axios({
        url: "http://172.11.4.39:8080/layout/list",
        method: "post",
        transformRequest: [function (data) {
          // Do whatever you want to transform the data
          let ret = ""
          for (let it in data) {
            if (data[it] == null) continue
            ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&"
          }
          return ret
        }],
        withCredentials: true,
        data: {
          page: 1,
          limit: 20
        }
      }).then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })

3. The returned request (the allow-origin on this side of the screenshot is not quite right, because I have captured the test image, which is actually the same as the 9527 written above)

cookie is not returned with each request

4. I wonder if the background cross-domain is not set correctly, so I wrote a html, cross-domain access request using jquery and axios respectively, without adding

xhrFields: {
    withCredentials: true
},

withCredentials: true

When

, it is true that cookie, is not set, but the problem is solved after adding it. But not in the vue project.

although there is no problem during development, webpack can be used as a proxy, and cookie can be set at this time, but after I have packaged it and deployed the test, I found that it still doesn"t work, and I still won"t set the returned cookie.

Thank you for your help.

2018 03 29 Update

The

problem is solved, but the problem mentioned is still unsolved. The request is then resolved through nginx forwarding, so that the set-cookie returned by the server is valid.

back to this question, because this project is done on the basis of others" encapsulated elementui project, I do not quite understand some configurations that are not good at learning, but I have read all the settings about axios and deleted some of the previous axios settings, which is still useless.

in the last minute, it was changed to use nginx to forward the request.

finally, thank you for your help.