通过webpack-dev-server分离开发cookie丢失？

Question

如题，跟前后端分离开发，使用webpack-dev-server做代理，ajax库使用了axios，但是制作登录页的时候出现了cookie丢失的问题。

查了网上的方案，添加了这句axios.defaults.withCredentials = true

无效。

webpack做了这样的配置：

devServer: {
        hot: true,
        host: '0.0.0.0',
        port: 3000,
        overlay: true,
        historyApiFallback: true,        
        proxy: {
            '*': {
                target: 'http://目标ip', 
                changeOrigin: true,    
                secure: false                     
            }
        }
    }

请问如何解决？谢谢~

Answer 1

从你的截图中看cookie 的Path=/cooco-admin; 本地开发路径上应该是没有这个cooco-admin吧,所以cookie会丢失，所以你需要让代理改一下cookie的Path；

proxy: {
            '*': {
                target: 'http://目标ip', 
                changeOrigin: true,    
                secure: false，
                onProxyRes: function(proxyRes, req, res) {
                  var cookies = proxyRes.headers['set-cookie'];
                  var cookieRegex = /Path=\/cooco-admin/i;
                  //修改cookie Path
                  if (cookies) {
                    var newCookie = cookies.map(function(cookie) {
                      if (cookieRegex.test(cookie)) {
                        return cookie.replace(cookieRegex, 'Path=/');
                      }
                      return cookie;
                    });
                    //修改cookie path
                    delete proxyRes.headers['set-cookie'];
                    proxyRes.headers['set-cookie'] = newCookie;
                  }
                }                     
            },
            
        }

Answer 2

historyApiFallback: true,
hot: true,
inline: true,
stats: { colors: true },
proxy: {
    //匹配代理的url
    '/api': {
    // 目标服务器地址
      target: 'http://baidu.com/',
      //路径重写
      pathRewrite: {'^/api' : ''},
      changeOrigin: true,
      secure: false,
    }
 },
 disableHostCheck:true

这样写就没问题了