跨域问题的三种解决方法

0. 后端设置响应头

Access-Control-Allow-Origin: '允许跨域的域名 or *(全部允许)'，同理还有 Access-Control-Allow-Method 等以 Access-Control 开头的响应头可以进一步控制跨域请求。

1. nginx 反代

基本原理同 0.设置响应头，这种方法比较方便，且限制较小。

2. jsonp

通过 script src 发送的请求不会受到跨域影响，因此后端可以和前端配合，具体逻辑如下：

1. 前端定义一个函数，并将函数名通过请求参数传给后端
2. 后端收到函数名，生成一个调用该函数脚本，并将参数传入该函数
3. script get 到脚本内容后就会执行后端返回的 script

示例代码如下：

<script>
function fn(arg) {
  alert(arg)
}
</script>
<script src="/a?callback=fn"></script>

function handleReq(params, res) {
  // 相当于返回fn('abbb')
  res.send(`${params.callback}('abbb')`
}

结论

跨域本质想解决还是需要后端配合，如果无法取得配合，那么 nginx 做反代是最方便的解决方法。

jsonp 需要前后端都修改代码，但是兼容性最好。