通过配置代理解决跨域

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

背景：

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

直入主题

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

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

知识扩展！

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

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

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.
  
• 补充：swagger、postman属于工具或插件，不存在跨域问题（人家不走浏览器），所以不存在同源策略限制，当前就访问无阻！