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
了解尚浅，望不吝赐教！