为什么会跨域?
在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号(如存在)相同,则允许相互访问。
跨域问题的解决方式?
JSONP,CORS,iframe,proxy等。
这里我们详细介绍proxy解决跨域。
proxy解决跨域
在vue.config.js中进行配置:
module.exports = {
//根路径 cli3.0以上使用publicPath
publicPath: './',
// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: 'static',
// 是否开启eslint保存检测,有效值:ture | false | 'error'
// webpack-dev-server 相关配置
dev:{
proxy: {
'/api': {
target: 'http://XX.XX.XX.XX:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/' //对请求路径进行重定向以匹配到正确的请求地址http://XX.XX.XX.XX:8081/login
}
}
}
}
}