关于axios在vue下进行跨域请求无法带上cookie的问题

Question

这个问题我知道网上有很多人提问，我也试了很多方法，但是还是无法找出问题所在。。。

1、在vue中，通过axios进行跨域请求，服务端返回的cookie无法设置，导致每次后台都获取新的session，无法保持登录状态。

服务器的地址我本机的地址

请求的服务为: http://172.11.4.39:8080/layout/list

vue 项目使用webpack http://localhost:9527

axios 版本为 0.17.1 下文单独测试的html中axios也是一样的版本

2、
java后端的跨域设置

 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请求代码：

 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、返回的请求(截图这边的allow-origin不太对，是因为我截到测试的图去了，其实是跟上面写的9527是一样的)

每次请求都不回带上cookie

4、我怀疑是不是后台跨域没设置对，于是我自己写了个html，分别用jquery和axios跨域访问请求，在没加上

xhrFields: {
    withCredentials: true
},

或

withCredentials: true

时，确实会不回设置cookie，但是加上后问题确实解决了。可是在vue项目中就不行了。

虽然开发时没问题，可以用webpack做代理，这时是可以设置cookie的，但是我打包后部署测试发现还是不行，还是不会设置返回的cookie。

谢谢各位帮助。

2018 03 29 更新

问题解决了，但是提的这个问题还是没解决。后面是通过nginx转发请求解决的，这样服务器返回的set-cookie是有生效的。

说回这个问题，因为这个项目是在别人封装elementui后的项目基础上做的，学艺不精的我有些配置也看的不是很明白，但是我把有关axios的设置都看了一遍，也删掉一些之前的axios设置，还是没用。。。

最后时间赶就改成了用nginx来转发请求。

最后谢谢各位的帮助。

Answer 1

最后我用nginx来转发请求来解决这个问题，希望能给其他人一点小小的思路，网上搜索资料有很多。
再次谢谢各位的帮助

Answer 2

1.你cookie是在哪里设置的，设置cookie的域名和api接口的域名是不是同一个，不是同一个是带不上的

Answer 3

如果你的后台和前端页面不是同一个域名是不能够带上cookie的。

Answer 4

把 IP 换成域名 试试

Answer 5

为啥响应头Access-Control-Allow-Origin是localhost:3000，不应该是localhost:9527吗？