前端10种跨域方案

485 阅读4分钟

1.跨域

1.什么是跨域

  1. 不同域名
  2. 同域不同端口
http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 
http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 
http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不允许 
http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js http://script.a.com/b.js 主域相同,子域不同 不允许(cookie这种情况下也不允许访问) 
http://www.a.com/a.js http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问) 
http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许
 

2.静态资源的使用CORS共享

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的 Web 应用被准许访问来自不同源服务器上的指定的资源。 当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。 比如:
站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。 网络上的许多页面都会加载来自不同域的 CSS 样式表,图像和脚本等资源。

CORS 分为"简单请求"以及"预检请求":

  1. 简单请求 使用下列方法之一:
  • GET

  • POST

  • HEAD 以及满足 Fetch 规范定义了对 CORS 安全的首部字段集合,不得人为设置该集合之外的其他首部字段。 而且 Content-Type 的值仅为下列三者之一:

  • text/plain

  • multipart/form-data

  • application/x-www-form-urlencoded

  1. 非简单请求的方法 2.1 预检请求 与上述简单请求不一样."需预检的请求"要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器, 以获知服务器是否允许该实际请求。"预检请求"的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。 当满足以下任一条件时,即应首先发送预检请求:

人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。 非简单请求的 Content-Type 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。 请求中使用了ReadableStream对象。 另外,还有附带身份验证的请求,也就是携带 cookies. 这个需要前端在请求实例中设置:

// 将 XMLHttpRequest 的 withCredentials 标志设置为 true
const xml = new XMLHttpRequest();
xml.withCredentials = true; 
// ...

这时,后端需要作出相应的设置

Access-Control-Allow-Credentials: true

3.脚本内发起的跨源

出于安全原因,浏览器限制从脚本内发起的跨源 HTTP 请求。
例如,XMLHttpRequest 和 Fetch API 遵循同源策略。 这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。

4.实测总结

一般 <img> , <script> 默认都支持跨域访问,只有在http 和https 下不能互相问题。 接口网络请求都会有跨域问题。

5.场景

1.简单场景

127.0.0.1:3000 访问 127.0.0.1:4000 发生跨域,这时候其实是浏览器同源问题,服务器其实可以正常响应

解决方案:

//4000的服务器只要启动下面代码
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
//3000的服务器就可以正常访问4000

2.预检请求场景

客户端设置了headers的X-Token 会启动-预检请求

axios.get("/api/users", {headers:{'X-Token':'jilei'}})
  1. 客户端会发送请求方法为options 的/api/users请求
  2. 服务端需要应答并返回合法信息,才能正常访问下一步请求,代码如下
if (method == "OPTIONS" && url == "/api/users") {
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "http://localhost:3000",
        "Access-Control-Allow-Headers": "X-Token,Content-Type",
        "Access-Control-Allow-Methods": "PUT"
    });
    res.end();
}
  1. 最后客户端才正常请求get的/api/users

3.跨域保存cookies场景

//ajax客户端请求地方,添加
axios.defaults.withCredentials = true

//node服务器 OPTIONS应答加上
  res.setHeader('Access-Control-Allow-Credentials', 'true');

//node测试代码 
   console.log('cookie',req.headers.cookie)//查看上一次cookies是否有返回
   res.setHeader('Set-Cookie', 'cookie1=va222;')//设置cookies

4.无刷新简易埋点

//同时兼容跨域问题
const img = new Image() 
img.src='/api/users?abc=123'

2.代理

1.正向代理

在以前电话拨号上网的年代

  • 公司内部个人pc -> 公司公用代理软件 -> 电话线 -> 服务器 -》 单一的服务
  • 公司公用代理软件可以有效缓存访问过的内容,以节省下个人访问一样的内容

2.反向代理

现在的高速网络年代

  • 公司内部个人pc -> 5G -> 服务器 -> (前端 + 后端 + 多台分布式服务器)
  • 由于网速飞快已经不需要公用的软件代理,
  • 反而是服务器由于越多越多应用,但是对外又只能有一个端口比如说80,
  • 这时候就需要用反向代理把多个内容反向成一个给客户端

常用方案

  • node
  • vue实现代理
  • nginx
  • nuxt

10种方式

常用 4 种

  1. 跨域资源共享(CORS)
  2. nginx代理跨域
  3. nodejs中间件代理跨域
  4. 浏览器屏蔽安全校验

不常用 6 种

  1. 通过jsonp跨域
  2. postMessage跨域
  3. WebSocket协议跨域
  4. document.domain + iframe跨域
  5. location.hash + iframe
  6. window.name + iframe跨域

1. 后端配置 跨域资源共享(CORS)

  • 需要服务端设置Access-Control-Allow-Origin 为 *
  • 如果客户端需要使用cookies ,则需要设置axios.defaults.withCredentials = true

2. nginx代理跨域

通过nginx代理到同一个域名和端口下面访问。

server {
   listen       80;
   server_name  localhost;
   location / {
       root   /var/www/html;
       index  index.html index.htm;
       try_files $uri $uri/ /index.html;
   }

   location /api {
           proxy_pass  http://127.0.0.1:3000;
           proxy_redirect     off;
           proxy_set_header   Host             $host;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
   }
}

通过nginx代理到另外一台ip+端口下,同时打开 跨域授权访问。 127.0.0.1:80 访问 127.0.0.1:8081

server {
   listen       80;
   server_name  localhost;
   location / {
       root   /var/www/html;
       index  index.html index.htm;
       try_files $uri $uri/ /index.html;
   }
}

server {
   listen       8081;
   server_name  localhost; 
   add_header Access-Control-Allow-Origin *; # 这里放开
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS; 
  location /api {
       proxy_pass  http://127.0.0.1:3000;
       proxy_redirect     off;
       proxy_set_header   Host             $host;
       proxy_set_header   X-Real-IP        $remote_addr;
       proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
   }
}

3.vue 中间件代理跨域

通过本地启动服务A ,把要请求B内容转发到本地的服务A,后面所有处理都在A上面执行。原理跟nginx方向代理类似。

//vue.config.js
  devServer: {
    disableHostCheck: true,
    compress: true,
    port: 5000,
    proxy: {
      '/api/': {
        target: 'http://localhost:4000', //注意这里只设置ip和端口,不要加任何后缀地址信息
        changeOrigin: true,
        pathRewrite: { //重写替换的url请求的前缀
          '^/api': '' //因为api 在真实接口一般不存在建议 去除掉
        }
      },

    },
  }

3.node项目 代理实现

express

var express = require('express');
const proxy = require('http-proxy-middleware')

const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false }));
module.exports = app

nuxt代理设置

//nuxt.config.js
  modules: [
    '@nuxtjs/proxy' //新增代理设置
  ],
  
  proxy:{
    "/api/":{
      target:"http://localhost:7001",
      secure:false,
      pathRewrite:{
        '^/api':""
      }
    }
  }

4. 浏览器屏蔽安全校验

  1. 谷歌浏览器直接屏蔽跨域 mac

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/jason_pro/Documents/ChormConfig

  1. 谷歌浏览器屏蔽跨域 windows

谷歌快捷键-> 属性-> 目标 -> C:\Users\xxxxxx\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dir=d:\MyChromeDevUserData

5. 通过jsonp跨域

通过动态创建script,再请求一个带参网址实现跨域通信。 需要服务端生成对应的js代码。客户端通过

 var script = document.createElement('script');
script.type = 'text/javascript'; 
script.src = ''//服务端返回js 

6. postMessage跨域

postMessage是HTML5中的API,支持弹出窗,多窗口,多iframe数据交互

  • postMessage(data,origin)方法接受两个参数
  • data: 可以是对象或字符串,部分浏览器只支持字符串
  • origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果当前同源设置为"/"。
//a.html:http://www.demo1.com/a.html
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'xxx'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.demo2.com');
    }; 
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from demo2 ---> ' + e.data);
    }, false);
</script> 


// b.html:http://www.demo2.com/b.html
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from demo1 ---> ' + e.data); 
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16; 
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.demo1.com');
        }
    }, false);
</script> 

7. WebSocket协议跨域

  • WebSocket protocol是HTML5新协议。实现浏览器与服务器全双工通信,支持跨域,可以使用第三方库Socket.io
  • a.html 注册socket服务c,跨域b.html 也注册socket服务c。
  • 通过服务端同时推送消息给 a 和 b ,实现跨域数据传输,原理跟聊天室有点类似
//服务c node.js  http://api.baidu.com:3000
const express = require('express')()
const http = require('http').Server(express)
const socketIO = require("socket.io")(http)//由于参数只能是http 需要转换为传统的 http库

socketIO.on('connection', (socket) => { //每个打开页面的用户连接后的 闭包处理
    // socket 为当前打开页面的客户端 
    //添加监听到消息方法
    socket.on("chat message", (msg)=> {
        //发送广播给所有人 
        socketIO.emit("chat message",msg);
    })
    socket.on("disconnection", () => {
        console.log("链接已断开")
    })
})
// 注意使用的是 http启动 应为stocketIO绑定在http上
http.listen(3000,()=> {
    console.log("启动3000 成功")
})

a.html www.demo1.com/a.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title> 
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" /><button>Send</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(function() {
        var socket = io("api.baidu.com:3000"); 
        $("form").submit(function(e) {
          e.preventDefault(); // 避免表单提交行为
          socket.emit("chat message", $("#m").val());
          $("#m").val("");
          return false;
        });

        socket.on("chat message", function(msg) {
          $("#messages").append($("<li>").text(msg));
        });
      });
    </script>
  </body>
</html>

b.html :www.demo2.com/b.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title> 
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" /><button>Send</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(function() {
        var socket = io("api.baidu.com:3000"); 
        $("form").submit(function(e) {
          e.preventDefault(); // 避免表单提交行为
          socket.emit("chat message", $("#m").val());
          $("#m").val("");
          return false;
        });
        socket.on("chat message", function(msg) {
          $("#messages").append($("<li>").text(msg));
        });
      });
    </script>
  </body>
</html>

8 document.domain + iframe跨域

只能在主域相同,子域不同的跨域应用场景。 如: www.baidu.com , api.baidu.com A父窗口 :www.baidu.com

<iframe id="iframe" src="http://www.baidu.com/b.html"></iframe>
<script>
    document.domain = 'baidu.com';
    var user = 'admin';
</script>

B子窗口: api.baidu.com

<script>
    document.domain = 'baidu.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);//可以直接通过parent访问
</script>

9. location.hash + iframe

通过A和B是跨域关系,A和C是同域,

  • A直接用iframe给B发送hash。
  • B通过C做中间人,传消息给A image.png
  1. A页面通过url的hash传值给B页面,同时留有被C调用的公用方法
  2. B页面一直监听hash变化,传入内嵌的C页面
  3. C页面一直监听hash变化,并且直接调用parent.parent 告诉A页面

image.png

相关代码

1.)a.html:www.domain1.com/a.html

<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2.)b.html:www.demo2.com/b.html

<iframe id="iframe" src="http://www.demo1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值,再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.)c.html:www.demo1.com/c.html

<script>
    window.onhashchange = function () {
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

10 window.name + iframe跨域

  • window.name 在不同的页面 不同域名 加载后依旧存在,2M左右
  • a.html 通过iframe 先访问跨域b.html,再访问 同域的proxy.html,这时就可以通过 iframe.contentWindow.name获取。

步骤

  1. b.html 设置window.name = 'xxxxx',记录要传给a.html的内容
  2. a.html 创建ifrme 访问跨域的 b.html,
  3. 加载完b.html后,再加载同域的 proxy.html页面,
  4. 这时候就可以通过 iframe.contentWindow.name 访问b.html 的name内容。
//a.html:http://www.demo1.com/a.html
var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后,读取同域window.name中数据
            callback(iframe.contentWindow.name);
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后,切换到同域代理页面
            iframe.contentWindow.location = 'http://www.demo1.com/proxy.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
};
// 请求跨域b页面数据
proxy('http://www.demo2.com/b.html', function(data){
    alert(data);
});

//poxy.html: http://www.demo1.com/proxy.html
//代理页面,内容为空 与 b同域

//b.html: http://www.demo2.com/b.html 
<script>
    window.name = 'xxxx';
</script>