由于浏览器的同源策略的限制，导致想要在A网站获取B网站成了一件麻烦事，本篇文章讲述的便是解决同源策略的方法之一：proxy

问题

假如，我想要开发一个天气页面，选择的则是彩云天气API，在开发的时候就会去彩云的官网获取申请相关资料。于是把API放到本地环境开发，就会因为同源策略而报错：（以下api是彩云官网提供的测试链接，并不是个人申请，仅当例子使用）
image.png :::danger Access to fetch at ‘https://api.caiyunapp.com/v2.5/TAkhjf8d1nlSlspN/121.6544,25.1552/realtime.json’ from origin ‘http://localhost:8888‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. :::

原理

解决同源策略的跨域方案有几种，其中一种便是通过代理来实现跨域。

比如：

  1. 本地开发是 http://localhost:8080 的服务。
  2. 在这个服务下访问 https://api.caiyunapp.com ，在没有进行代理相关配置，就会报错。
  3. 而代理，则是在本地配置后，在请求 https://api.caiyunapp.com/xxx 时会把 http://localhost:8080 转化成https://api.caiyunapp.com/ ，并请求过去，而云彩天气的服务器就收到请求确认无误后，就会返回数据
  4. 在收到之前，通过中间层的处理 ，把响应的 https://api.caiyunapp.com/ 转成 本地开发的 http://localhost:8080 ，这样就可以得到想要的数据。如图

代理proxy - 图2

解决

关于代理的工具有很多种，这里选用 React umi提供的配置文件，配置文件如下：

  1. //config.js    配置文件
  2. proxy: {
  3.   dev:{    //环境为dev时，条件为这个对象
  4.       'api': {    //请求的url路径为“api”时，就会代理这个条件
  5.             'target': "https://api.gmit.vip/"    //服务器域名
  6.           'changeOrigin': true,    //允许域名进行转换
  7.           'pathRewrite': { '^/' : '' },    //将请求url中的 “/” 去掉，替换成 “”
  8.     }
  9.   }
  10. }
  12. //xxx.jsx 某页面的一个组件在请求网络
  14. //请求路径,    注意,路径开头要匹配代理条件，例如上面的条件是 /Api ,那么该请求路径的开头就必须是 /Api ,否则条件不匹配
  15. request("/Api/FjImg")
  16. //上面发送请求为 http://localhost:8080/Api/FjImg 
  17. //然后因为代理，实际上发送过去的是 https://api.gmit.vip/Api/FjImg

其他还有很多，Vue Cli 也提供了相关的配置，webpack也有这样的相关配置，以及VScode也有这样的代理插件。
虽然工具很多，但配置文件的字段几乎不变，甚至是一模一样，所以只需要明白字段代表着什么意思就可以，其他细节看相关工具对应的文档！