关于umi:跨域问题及Umiproxy代理解决跨域问题

1. 为什么会呈现跨域问题？

• 跨域问题的呈现：是因为浏览器的同源策略导致的。
• 同源策略：同源策略是浏览器是浏览器最外围也 最根本的平安性能 ，因而其次要目标是为了平安，如果没有同源限度，在浏览器中的cookie 等其余数据能够任意读取， 不同域下的 DOM 任意操作，ajax 任意申请其余网站的数据，包含隐衷数据。

• 同源策略限度三种操作：
  1、cookie，localstorage，IndexedDB 无奈读取
  2、DOM 无奈获取
  3、Ajax 申请不能发送

  2. 什么是跨域？

  当一个申请 url 的 协定、域名、端口 三者之间 任意一个 与以后页面 url 不同即为跨域。

3.Umi 产生 CORS 谬误的及解决举例：

• CORS 谬误的产生：
  首先：用 node 发动了一个 http://localhost:8080 的服务；
  那么在这个服务器下 拜访的网页也就是默认在 http://localhost:8080 这个域上面；
  而后：假如 服务端所在的域是 http://example.com；
  这样通过 ajax 发送申请的话;
  此时：由客户端间接传过来的就是一个 域名为 http://localhost:8080 的申请 ；
  而服务端所在的域是 http://example.com；
  尽管协定雷同，然而域名不同，跨域申请失败；
• 代理解决跨域的原理 ：将代理层作为在 客户端和服务端 之间的中间层，代理层的作用就是 将不同的域名转换为雷同的域名。

• 代理解决跨域问题原理图解及过程 ：
  
  首先：客户端发送申请，先通过代理层的解决，将域名 http://localhost:8080 转换为了 http://example.com；将域名转换之后再将申请发送到服务端；
  而后，服务端接管到的申请的域名就为 http://example.com；
  因而，同理，服务端将响应发送回客户端的时候，响应也是先通过代理层的解决，将响应的域名 http://example.com 转换为了 http://localhost:8080；这是客户端接管到的响应的域名也和本人的域名雷同了。

  umi 应用 proxy 代理解决跨域

  1. 首先找到 confige.js 文件，配置如下：

  proxy: {
    '/api': {// 标识须要进行转换的申请的 url
      target: 'http://example.com/',// 服务端域名
      changeOrigin: true,// 容许域名进行转换
      pathRewrite: {'^/api': ''},// 将申请 url 里的 api 去掉
    }
  },

2. 在 src/utils/ip.js 配置如下：

function remoteLinkAddress() {
  const IPaddress = `/api`;
  return IPaddress;
}

export default remoteLinkAddress;

此时，咱们收回的申请 http://localhost:8080/api/xx/xx，当这个 url 发送到代理层时，proxy 检测到 ’/api’ 标识，将域名更换为 http://example.com/api/xx/xx，而后将申请 url 中的 /api 去掉，这样咱们发送到服务器端的 Url：http://example.com/xx/xx；

参考资料：

• 什么是跨域？跨域解决办法
• umi 应用 proxy 代理解决跨域问题 - 思否
• umi 应用 proxy 代理解决跨域问题 -CSDN

了解尚浅，望不吝赐教！