浏览器的同源策略以及如何实现跨域

一、首先我们先来说说什么是同源策略：

同源策略：是浏览器针对不同源的脚本或文本的访问进行限制，是浏览器的一个基本的安全功能。
同源包括‘协议+域名+端口’三者相同；
浏览器中大部分标签内容是受同源策略限制的，以下三个可以不受影响：
<img src=xxx>
<link href=xxx>
<script src=xxx>

二、如何实现跨域

下文主要讲三个比较主流的跨域方案：

1、jsonp

 它的本质是利用script标签(src属性)不受浏览器的同源策略限制的特性。
 虽然使用比较简单，但是只支持get请求，有安全问题容易受到xss攻击，且需要前后端配合。
 

//写一个简单的例子
//前端部分代码
<button id="btn">点击</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
   var frame = document.createElement('script');
   frame.src = 'http://localhost:8000/list?fruit=apple&color=red&callback=eatFruit';
   $('body').append(frame);
});

function eatFruit(res){
    alert(res.message+res.fruit+'是'+res.color);
}
</script>
//后端部分代码
router.get('/list', (req, res) => {
  let data = {
    message: 'success!',
    name: req.query.fruit,
    age: req.query.color
  }
  data = JSON.stringify(data)
  res.end('eatFruit(' + data + ')');
});

2、比较常用的方案cors

 cors是一种跨域资源共享的机制，它使用额外的http头来告诉浏览器让运行在一个origin上的
 web应用被准许访问来自不同源服务器上的指定资源。
 

// 以node为例
var express = require('express');
var app = express();
var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
}
app.use(allowCrossDomain);

3、最方便的跨域方案nginx

  nginx是一款极其强大的web服务器，其优点是轻量级，启动快，高并发。使用nginx的反向代理。
  反向代理的原理是因为所有的请求都必须先经过nginx的处理，
  nginx作为代理服务器再将请求转发给node或者java服务，这样也就能规避同源策略。
  注意：直接请求nginx也是会报跨域错误的要设置允许跨域。
   

另外之前做过websocket在线客服的功能，来简单说下它的通信： websocket是一种双向通信协议，在建立链接之后，websocket的server与client都能主动向对方发送或接收数据，连接建立好之后client与server之间的双向通信就与http无关了，因此可以跨域。