同源策略和跨域方案

一、同源策略

1、定义

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。

2、示例

3、参考

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

二、跨域方案

1、JSONP

function jsonp(url, params, callback) {
  // 判断是否含有参数
  let queryString = url.indexOf("?") === "-1" ? "?" : "&";
  // 添加参数
  for (var k in params) {
    if (params.hasOwnProperty(k)) {
      queryString += k + "=" + params[k] + "&";
    }
  }
  // 处理回调函数名
  let random = Math.random()
      .toString()
      .replace(".", ""),
    callbackName = "myJsonp" + random;
  // 添加回调函数
  queryString += "callback=" + callbackName;
  // 构建请求
  let scriptNode = document.createElement("script");
  scriptNode.src = url + queryString;
  window[callbackName] = function() {
    // 调用回调函数
    callback(...arguments);
    // 删除这个引入的脚本
    document.getElementsByTagName("head")[0].removeChild(scriptNode);
  };
  // 发起请求
  document.getElementsByTagName("head")[0].appendChild(scriptNode);
}

2、CORS

1. 总概：在向服务器发送请求的时候，加上一些特定的头部信息，并配置服务器，让服务器放行该种请求，返回资源。

2. 示例：

   请求报文：

Origin: http://foo.example

​ 响应报文：

Access-Control-Allow-Origin: *

3. 参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

3、Vue.js中使用代理

1. 实现：

// vue.config.js
devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://121.121.67.254:8185/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：
          http://localhost:8080/api/core/getData/userInfo 时，
          实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api */
          '^/api': '' 
        }
      },
    }
  },

2. 补充：这种方法只适合于开发阶段，工程尚未编译的时候使用，仅作为一个方便调用接口的解决方案。
3. 参考：https://www.cnblogs.com/lihaohua/p/12372267.html