关于前端:umi使用proxy代理解决跨域问题

36次阅读

共计 834 个字符，预计需要花费 3 分钟才能阅读完成。

客户端在拜访与本人 域名不同 的服务端时，就会造成跨域。

比方：
用 node 起了一个 http://localhost:8080 的服务；
那么在这个服务器下拜访的网页也就是默认在 http://localhost:8080 这个域上面；
假如服务端所在的域是 http://example.com；
这样通过 ajax 发送申请的话;
由客户端间接传过来的就是一个域名为 http://localhost:8080 的申请；
而服务端所在的域是 http://example.com；
域名不同，跨域申请失败；

解决跨域能够从客户端和服务端进行解决。

本文在这里就是介绍，在 umi 中应用 proxy 代理来解决跨域。

应用代理解决跨域的原理，就是在客户端和服务端之间加了一层中间层。
而这个中间层的作用就是 将不同的域名转换为雷同的域名。

客户端发送申请，这里先通过中间层的解决，将域名 http://localhost:8080 转换为了 http://example.com；
将域名转换之后再将申请发送到服务端；
服务端接管到的申请的域名就为 http://example.com；
同理，服务端将响应发送回客户端的时候，响应也是先通过中间层的解决，将响应的域名 http://example.com 转换为了 http://localhost:8080；
这样客户端接管到的响应的域名也和本人的域名雷同了。

在 config.js 配置文件里设置

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

发送申请时须要将申请的 url 设置为 http://localhost:8080/ci/xx/xx，这样代理才会对这条申请的域名进行替换。