跨域问题及Umi中使用proxy代理解决跨域问题

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

• 跨域问题的出现：是由于浏览器的同源策略导致的。
• 同源策略：同源策略是浏览器是浏览器最核心也最基本的安全功能，因此其主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。

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

  2.什么是跨域？

  当一个请求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；

另附：前端跨域请求的多种方式

参考资料：

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

理解尚浅，望不吝赐教！