umi使用proxy代理解决跨域问题

什么是跨域
客户端在访问与自己域名不同的服务端时,就会造成跨域。
比如:
用node起了一个http://localhost:8080 的服务;
那么在这个服务器下访问的网页也就是默认在 http://localhost:8080 这个域下面;
假设服务端所在的域是http://example.com
这样通过ajax发送请求的话;
由客户端直接传过去的就是一个域名为 http://localhost:8080 的请求;
而服务端所在的域是 http://example.com
域名不同,跨域请求失败;
解决跨域可以从客户端和服务端进行解决。
本文在这里就是介绍,在umi中使用proxy代理来处理跨域。
代理解决跨域的原理
使用代理解决跨域的原理,就是在客户端和服务端之间加了一层中间层。
而这个中间层的作用就是将不同的域名转换为相同的域名。
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去掉 } }

【umi使用proxy代理解决跨域问题】发送请求时需要将请求的url设置为 http://localhost:8080/ci/xx/xx,这样代理才会对这条请求的域名进行替换。
如有问题请各位多多指教!

    推荐阅读