最近做了两个后台的项目,前后端使用的技术都没有改变,只是在第一个项目前端配置了代理转发,第二个项目前端没有配置,但是就是这一个区别,使得项目的联调的时候出现问题,今天就这个问题总结一下
问题
后端使用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,
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。