关于跨域你真的理解了吗?

前言

前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式。

一、什么是跨域？

1.什么是同源策略？

同源策略是浏览器的一种安全策略，也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF, 黑客等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。原因是因为早期互联网很多公司共用一个浏览器, 即使是相同的的ip 也会产生跨域.

但是有三个标签例外,是允许跨域加载资源, 不受浏览器同源策略影响:

• <img src=XXX>
• <link href=XXX>
• <script src=XXX>

二、跨域解决方案

1.jsonp

function jsonp(url) {
  return new Promise((resolve, reject) => {
    const random = "CallbackName" + Math.random();
    window[random] = data => {
      resolve(data);
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${random}`;
    script.onload = () => {
      script.remove();
    };
    script.onerror = () => {
      reject();
    };
    document.body.appendChild(script);
  });
}

上面的代码就是jsonp 实现跨域的核心代码, 其实就是利用 script 标签的 src 属性不受同源的影响, 简单来说jsonp 其实就是一个回调函数, 前端通过 src属性 传给后端一个 名为callback=Math.random 的一个函数名, 后端返回给前端一个具体的函数, 前端拿到去调用

三、jsonp 的缺点

其实通过代码可以很清楚的看到jsonp 的缺点

• 不能清晰的返回http 状态码
• 只能使用GET 请求, 不能使用POST

四、其他的解决方案

本次主要讲的是jsonp 的解决方法, 下面简单介绍一下, 后续会继续更新

• cors, 通过设置 Access-Control-Allow-Origin,
• proxy, 通常是在 webpack 中配置

deServer:{ 
  proxy:{ 
    '/api01':{ 
        target:'http://xxx.xxx.xxx:5000', changeOrigin:true, // 重写请求，根据接口详情，判断是否需要 
        pathRewrite:{ '^/api01':'' } 
      } 
    } 
  },