跨域导致浏览器不保存cookie

最近做了两个后台的项目,前后端使用的技术都没有改变,只是在第一个项目前端配置了代理转发,第二个项目前端没有配置,但是就是这一个区别,使得项目的联调的时候出现问题,今天就这个问题总结一下

问题

后端使用cookie 来处理登录验证问题,登录成功后浏览器有set-cookie字段,但是浏览器没有保存cookie

原因

在请求的时候,后端处理了跨域的问题,例如本机的ip:192.168.1.66 ,发送请求的接口为IP:192.168.1.67,出现跨域,后端处理了跨域那么cookie只会保存在67 的地址,所以不会保存在66的就是我们本机的cookie

处理

前端使用代理转发,vue2.x和vue3.x的版本对于处理代理转发,有点区别这里也说明一下:

\`vue2.x\`  
//配置config 文件下的index.js  
​  
// see http://vuejs-templates.github.io/webpack for documentation.  
const path \= require('path')  
module.exports \= {  
 dev: {  
 // Paths  
 assetsSubDirectory: 'static',  
 assetsPublicPath: '/',  
 proxyTable: {  
 '/v1': {  
 target: 'http://192.168.1.24:8000',//请求的地址  
 changeOrigin: true,  
 pathRewrite: {  
 '^/v1': '/v1'  
 }  
 },  
 onProxyReq: function (proxyReq, req, res) {  
 //实在不知道代理后的路径，可以在这里打印出出来看看  
 console.log("原路径：" + req.originalUrl, "代理路径：" + req.path)  
 }  
 },  
 // Various Dev Server settings  
 host: 'localhost', // can be overwritten by process.env.HOST  
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined  
 autoOpenBrowser: false,  
 errorOverlay: true,  
 notifyOnErrors: true,  
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-  
   
 /\*\*  
 \* Source Maps  
 \*/  
 // https://webpack.js.org/configuration/devtool/#development  
 devtool: 'cheap-module-eval-source-map',  
 // https://vue-loader.vuejs.org/en/options.html#cachebusting  
 cacheBusting: true,  
 cssSourceMap: true  
 },  
​  
 build: {  
 // Template for index.html  
 index: path.resolve(\_\_dirname, '../dist/index.html'),  
 // Paths  
 assetsRoot: path.resolve(\_\_dirname, '../dist'),  
 assetsSubDirectory: 'static',  
 assetsPublicPath: '/',  
 /\*\*  
 \* Source Maps  
 \*/  
 productionSourceMap: false,  
 // https://webpack.js.org/configuration/devtool/#production  
 devtool: '#source-map',  
 // npm install --save-dev compression-webpack-plugin  
 productionGzip: false,  
 productionGzipExtensions: \['js', 'css'\],  
 bundleAnalyzerReport: process.env.npm\_config\_report  
 }  
}  

​

\`vue3.x\`  
//直接在vue.config.js中配置  
module.exports \= {  
 //配置代理  
 devServer: {  
 host:"localhost",//要设置当前访问的ip 否则失效  
 // open: true, //浏览器自动打开页面  
 proxy: {  
 '/v1': {  
 target: 'http://192.168.1.64:9100/',  
 secure: false,  
 // ws: true,  
 changeOrigin: true,  
 pathRewrite:{  
 '^/v1':'/v1'  
 }  
 }  
 }  
 }  
 //关闭eslint检测  
 devServer :{  
 overlay : {  
 warnings:false,  
 errrors:false  
 }  
 },  
 lintOnSave : false,  
 //打包问价使用相对路径  
 publicPath:'',  
 //不生成map文件  
 productionSourceMap: false,  
}