什么是跨域
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
常见的跨域场景
Vue解决跨域问题
Vue代码结构
- request.js设定axios的请求设定初始URL请求:
其中process.env.VUE_APP_BASE_API设定是通过项目内 .env文件设定的,举例:
最终设定的基础地址为:http//localhost:8000/dev-api - api请求地址设定
基础URL与API请求地址整合:http//localhost:8000/dev-api/user/login
而我们想访问的后端的URL地址是: http//localhost:8081/mock/user/login,
这时就会出现跨域的问题!
Vue跨域问题解决
通过Vue提供的配置文件vue.config.js进行解决:
1.如果请求的URL地址中存在/dev-api字段,则直接进行切换目标服务器地址,也就是target指向的地址,举例:
URL请求:http//localhost:8000/dev-api/user/info,地址中存在dev-api字段,则需要切换服务器地址
修改后的请求地址:http//localhost:8081/mock/dev-api/user/login
2.我们需要请求的实际地址为:http//localhost:8081/mock/user/login,
通过pathRewrite属性设定: ‘^/dev-api’ : ‘’,
这时会把请求地址http//localhost:8081/mock/dev-api/user/login内的/dev-api替换为空字符串,最终请求的地址为:http//localhost:8081/mock/user/login
最终解决Vue的跨域问题