跨域致使瀏覽器不保存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,  
}