跨域

浏览器为了安全考虑，设置了同源策略：约束前端的ajax请求的目标地址跟当前网页的地址必须同源。

即同源协议：同一协议，同一域名，同一端口。只要有一个不同，就会受到同源策略的限制 === 造成跨域。

跨域的解决方案有一般有这三种：

一、jsonp

原理：利用html对于script、img、iframe等标签发起的请求不受同源策略的影响，从而利用script标签发送请求。

img标签默认会将响应回来的内容当作图片解析；
link标签默认会将响应回来的内容当作css解析；
iframe标签默认会将响应回来的内容当作html页面解析。
script标签默认会将响应回来的内容当作js代码执行。例：后端：

前端：

应用场景：百度联想词的搜索、京东、...

二、cors

原理：在请求的目标服务器中，设置允许跨域的响应头，浏览器就没有立场去拦截请求信息了。

给目标访问设置响应头：

'Acess-Control-Allow-Origin': '白名单地址'
'Acess-Control-Allow-Origin': '*' //代表所有

原理：浏览器只能限制浏览器打开的页面中的ajax，但是无法限制服务器，因为服务器代码不运行在浏览器。所以前端运行在浏览器的页面，发送请求的时候不直接发给目标服务器，而是发给当前打开页面使用的服务器，当前打开页面的服务器发起请求，向目标服务器获取数据，将数据响应给当前前端页面的ajax。

需要在服务器上设置代理配置，nodejs服务器，使用代理需要依赖第三方模块：http-proxy-middleware

server: {
    // 端口号
    prot: '8080',
    // 代理
    prosy: {
      '/abc': {
        //  target键值对用于配置想要访问的目标访问地址
        target: 'http://localhost:3002',
        // 假装跟对方同源
        changeOrigin: true,
        // 重写地址
        /* 假设：要发请求的地址是 === /abc/api/index/list
        开头可以匹配到代理当中
        会对请求地址进行拼接，无论是请求使用的地址，还是配置中的target单独使用，
        都无法真正拿到后端数据，所以得拼接
        拼接后的地址 = target + 现在使用的请求地址 = http://locathost:3002 + /abc /api/index/list
        就需要将拼接后的地址中的 /abc 去掉 ===> 所以重写地址
        */
       rewrite: () => {
          return path.replace('/abc', '')
       }
      }
    }
  }

在发请求的时候，如果需要代理，就在地址前添加/abc，不需要做代理的请求，就不要添加/abc

> _ < 每日一签

世界很烦，但你要很可爱。

跨域及解决方案

跨域

一、jsonp

二、cors