vue2的proxy代理解决跨域问题

658 阅读2分钟

什么是跨域

跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和服务端必须同源,也就是协议、域名和端口号必须一致

image.png

如果协议、域名和端口号中有其中一个不一致,则浏览器视为跨域,进行拦截

如何判断一个浏览器的请求是否跨域?

在A地址(发起请求的页面地址)向B地址(要请求的目标页面地址)发起请求时,

如果A地址和B地址在: 协议 域名 端口  不全相同,则说明请求是跨域的;

跨域请求在浏览器中是非常常见的现象!

跨域请报错的原因

请求是跨域的,并不一定会报错。普通的图片请求,css文件请求是不会报错的

跨域请求出现错误的条件: 浏览器同源策略  &&  请求类型是ajax类型

解决方案

  • 前端用JSONP方式去发请求(jsonp不是ajax请求)
  • 后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错
  • 代理转发

image.png

使用Vue-Cli配置代理转发

image.png

思路

  1. vue-cli脚手架工具在启动时,会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。

  2. vue-cli脚手架支持配置一个代理: 将指定的类型请求,转发到目标服务器。

  3. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题,可以直接发送请求

  4. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制,可以直接发送请求

这样,我们就可以通过服务器代理做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明

vue.config.js配置文件中,有一项是devServer,它就是我们下边要操作的主角

image.png

去掉axios基地址

image.png

重启项目,验证结果

  1. 修改了配置文件,一定要重启前端项目
  2. 再次测试登陆接口,我们发现:跨域问题已经解决了