乐趣区

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

什么是跨域

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

比方:
用 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
这样客户端接管到的响应的域名也和本人的域名雷同了。

umi 应用 proxy 代理解决跨域

config.js 配置文件里设置

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

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

如有问题请各位多多指教!

退出移动版