vue项目如何解决跨域问题
vue项目跨域解决方案
·
1.什么是跨域?
1.跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
2.浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
3.比如你在www.垃圾网站.com试图通过ajax或者是fetch发起请求访问www.银行.com,并进行某些操作,对比一看主域名不同(垃圾网站/银行),就会被拒绝
4.同一个端口,同一个ip,同一个项目,才能进行访问
2.怎么解决跨域
1.在项目根目录下新建一个vue.config.js文件
2.配置文件内容,api是自己起的路径名字,此时这里配置了路径,你axios封装的根路径,就不需要写后台地址
// 配置的意思
module.exports = {
devServer: {
// 自动加载这个文件
// 默认值 为localhost 127.0.0.1
// 当前端口默认为8080
host: "localhost",
// 当前vue服务器的端口
port: "8081",
// 默认有的
// 前端跨域
proxy: {
"/api": {
// 配置你要让那些路径要跨域
// 你可以让该路径前面添加api
// login
// /aa/login
// 是后台路径
target: "http://124.221.12.94/wyyl-s/public",
// true 代表跨域
changOrigin: true,
pathRewrite: {
//重写 login
"^/api": "",
},
},
},
},
};
3.配置完成:一定要记得重新启动项目,加载这个vue.config.js文件,不然没有作用.
更多推荐
所有评论(0)