通过配置代理解决跨域

╰+攻爆jí腚メ 2022-08-30 14:57 260阅读 0赞

> Do everything you can right now, and then decide.  
> 全力以赴，历而后择。

## 背景： ##

> 项目请求后端本地local host （指定的IP）下的服务，前端请求时直接控制台出现了代理问题，信息见文章最后一张图。  
> 前端发起请求代码—通过浏览器访问----对应后端服务 （浏览器的同源策略，阻碍请求！）

## 直入主题 ##

*  首先创建vue.config.js并~加入如下配置：（红色部分）

![在这里插入图片描述][65383b8b5f316551b6cede4c0498aa46.png_pic_center]

*  将上一步的配置到axios.defaults.baseURL中（上面只是配置，若要生效，需要加入到baseRUL中去，找到你项目配置baseURL的地方，就如我同事将这块的配置单独配置到一个js文件去了…）  
    ![在这里插入图片描述][070b09db86ee9a18130f97c7b6e84a9e.png_pic_center]
 *  最后，重启项目（vue.config.js重启才会被加载）注：以上两步实现配置代理，后续请求API直接填写API名称即可，前缀已配置在vue.config.js中！

## 知识扩展！ ##

### 浏览器的同源策略：保证浏览器的安全性 ###

> 给出的请求地址，若想访问另一个请求地址，前提必须满足协议、域名（主机）、端口号三个都相同（浏览器同源策略），才可以在浏览器上访问另一个请求，否则请求被拦截，怎么办呢？就需要给前者配置代理，来解决跨域问题！![在这里插入图片描述][af48af9784e9e169887895f047ea0f3b.png]  
> 跨域简单理解，将不同协议、域名、端口下的两个请求，通过一系列配置，从而可以正常访问！

### Vue未配置代理~出现的问题 ###

*  其一：请求状态码报405（咦，我请求携带参数格式正确啊，我都使用swagger、postman测试过了呢，怎么请求拦截呢？人品问题？）
 *  其二：控制台报错信息：Access to XMLHttpRequest at ‘http://172.20.8.24:29084/login/get\_valid?mobile=17711768662’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.  
    ![在这里插入图片描述][daadc80d7896816bc854deeb5708f66a.png_pic_center]
 *  补充：swagger、postman属于工具或插件，不存在跨域问题（人家不走浏览器），所以不存在同源策略限制，当前就访问无阻！

[65383b8b5f316551b6cede4c0498aa46.png_pic_center]: /images/20220829/f3a2240a8f934479b5188f2c1ae1bef6.png
[070b09db86ee9a18130f97c7b6e84a9e.png_pic_center]: /images/20220829/66eb1451722b4d639380bfad2b324fa0.png
[af48af9784e9e169887895f047ea0f3b.png]: /images/20220829/af5a1e3dfb814d62a6c543d9475e1a1a.png
[daadc80d7896816bc854deeb5708f66a.png_pic_center]: /images/20220829/5bfdd55700d74c5aae1816fa609e9891.png