跨了个域 ｜ 8月更文挑战

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

背景

不遵守浏览器的同源策略的行为叫做跨域

跨域是一种常见的现象，了解跨域并且解决跨域是不可或缺的

概念

同源策略

两个URL的协议，端口和域名相同，两个URL同源

1. 协议：HTTP 和 HTTPS 两种
2. 端口：域名或者ip携带的端口
3. 域名：同级域名

解决跨域

1. CORS 跨域资源共享

所有主流浏览器都支持 CORS

CORS 需要的是服务端处理，有区分简单请求和非简单请求

这里会有一种特殊情况 options 请求(非简单请求的情况下发出)，这是浏览器向服务端发送的预检请求，询问是否允许跨域。服务端也会在请求中返回需要携带的数据

2. nginx 反向代理

在nginx服务器上对目标域名的配置文件中添加代理方式规避跨域。可以编写多个配置

server {
    location /api/ {
        proxy_pass http://api.com
    }
    location /api2/ {
        proxy_pass http://api2.com
    }
}

3. node.js 中间件

搭建 node.js 项目接受转发浏览器的请求

利用了 node.js 属于服务端的一种不存在跨域的特点

本质上还是利用 CORS 方式解决跨域问题，所以感觉还是直接服务端利用 CORS 处理比较合适

4. jsonp

模拟发起script请求，服务端处理请求并返回回调函数。其中回调函数是前端提前注册好的全局函数

// 注册的回调函数，需要时全局的
function callback() {
    // do something
}

const scriptDom = document.create('script')
scriptDom.src = `http://api.com`
document.body.append(scriptDom)

jsonp 的缺点有两个

1. 只能解决GET请求，不能解决其他类型的请求
2. 只能解决HTTP请求，不能解决不同域的两个页面之间的调用

5. 其他

上述的方法足以覆盖我们常见的场景，还有一些特殊的情况需要处理。比如两个不同域的页面之间的调用，可以使用 postMessage 方式。

还有很多可以解决的方法都是在前端做的处理

总结

本着前端尽量少改动的初衷，个人觉得比较适合的解决方式是 nginx 反向代理和 CORS。如果需要两个页面之间的访问的话可以考虑 postMessage

问题

1. 什么叫做跨域
2. 如果解决跨域
3. 浏览器请求中 options 有什么作用