跨域问题及Umi-proxy代理解决跨域问题 umi跨域反向代理

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

跨域问题的出现：是由于浏览器的同源策略导致的。
同源策略：同源策略是浏览器是浏览器最核心也最基本的安全功能，因此其主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。
同源策略限制三种操作：
1、cookie，localstorage，IndexedDB无法读取
2、DOM无法获取
3、Ajax请求不能发送
2.什么是跨域？【跨域问题及Umi-proxy代理解决跨域问题】当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	是	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	是	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	是	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	是	端口号不同（8080/7001）

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；
参考资料：