本篇参考如下文章:
vue3.0 vue.config.js 配置跨域
vue-cli3设置代理跨域详解
vue-cli3配置与跨域处理
VUE前端项目配置代理解决跨域问题
用 Vue+ElementUI 搭建后台管理极简模板
什么是跨域
为什么会产生跨域
在开发阶段,我们的本机ip(假设为192.168.1.109:8080),但是后台同学的接口地址可能为192.168.1.202:8085,当我们用axios发起请求的时候,因为客户端和服务端的IP地址网段不同,就可能会发生上图的报错,这就是因为跨域造成的,顾名思义,跨域名请求
如何解决跨域
从这篇文章 VUE前端项目配置代理解决跨域问题里讲到了3中解决办法,分别是:
1.Chrome扩展插件
这个需要梯子,不多赘述
2.服务端解决:
这个需要找后台同学协商解决,好在的是,后台使用的开源框架,第三方库等,都对跨域做了处理,能保证客户端在哪里调用,都不会出现跨域问题,但是万一呢,万一后台没有对跨域处理???
3.前端项目配置本地代理
经过测试,此种解决方法实用性很强,不需要服务端有没有配置跨域解决办法,也不需要浏览器插件支持,都可以访问外部接口
通过前端项目自己配置的代理,能达到,将原本的
本地 ----> 远端
的流程,转换为
本地 ----> 本地代理 ----> 远端
其中本地代理->远端的过程,由框架来完成,并保证能正常请求得到数据,这样,当我们发起请求时候,就是一个本地--->本地代理的请求,这是一个本地请求本地的请求过程,在同一个ip(域名)下进行,因此,不再存在跨域的问题
这里引用用 Vue+ElementUI 搭建后台管理极简模板的一张图,能更直观的理解这一过程:
对于vue-cli 3.x建立的项目,我们需要如下配置vue.config.js文件:
module.exports = {
publicPath: "/",
outputDir: "distination",//npm run build 输出目录
assetsDir: "assets",//静态资源目录(js,css,img,fonts)
lintOnSave: false,//是否开启EsLint保存时检测,有效值: true false error
devServer: {
open: true,//是否自动打开浏览器
host: 'localhost',
port: '8081',
https: false,
hotOnly: false,//模块是否热更新,具体语义不详
//跨域
proxy: {
//配置跨域
'/api': {
target: "http://test.mock.com/",//后台接口baseUrl
ws: true,//是否跨域
changeOrigin: true,//配置跨域
pathRewrite: {
'^/api': ''
}
}
}
}
}
这样,我们使用axios发起请求时候,假设我们的接口地址为'aaa/bbb',我们需要在发起请求时候讲地址写成api/aaa/bbb,只有这样,才会被我们配置的paoxy里面的/api代理到
有的同学可能会产生疑问: 你这不是修改了接口地址么,还能请求到么???
先别急,我们上面的配置里面还有pathRewrite的配置,它的功能就是,通过通配符,把地址里面的"/api"替换为冒号后面的内容,比如我们配置的就是一对单引号,这就把接口地址改回去了,
总结
造成跨域的原因,就是Request URL中的host和我们 请求头中的Origin字段不一致,也就是常说的非同源,
如图,可以看到,Request URL中的host 和 请求头中的 Origin字段已经一致了，这就是为什么配置代理可以解决跨域的问题,
造成跨域是因为Request URL 的host与我们的Origin字段不一致，也就是常说的，非同源，通过配置代理，我的请求变成了从
192.168.1.109:8080(即:我本地的ip)向192.168.1.109:8080(还是我本地的ip)请求数据，则解决了非同源的问题
简单的说(人话模式,哈哈原作者这句太精辟了):
人话：代理服务器代替我们请求了服务器的数据返回给了我本机，我本机向我本机请求"代理"替我拿到的数据，因此我不再需要考虑跨域了