1. 前言
- 跨域作为前端常见的问题,还是单独写篇文章 给足面子吧
- 列出常见的 跨域解决方案
2. CORS(跨域资源共享)
CORS
是一种由浏览器实现的机制,允许服务器在响应头中设置允许跨域访问的规则,从而解决跨域请求的问题。- 服务器端需要设置响应头中的 Access-Control-Allow-Origin 字段来指定允许跨域请求的域名
- 至于 nodejs的 跨域插件
cos
, python的flask_cors
都是第三方帮助我们设置而已
3. JSONP(JSON with Padding)
- JSONP 是一种通过动态添加 <script> 标签来实现跨域请求的方法。
- 通过在请求 URL 中传递一个回调函数的名称,服务器将返回一个包裹在回调函数中的 JSON 数据,从而实现跨域数据获取。
- 这并不是规范,现在用的也少了
4. 代理服务器:
- 可以通过设置代理服务器,将前端请求转发到同源的后端服务器上。
- 前端通过向代理服务器发送请求,
- 然后由代理服务器将请求转发到目标服务器上,并将响应返回给前端,从而避免了跨域问题
- WebSocket:
WebSocket
是一种双向通信协议,可以建立客户端与服务器之间的长连接
,- 通过
WebSocket
进行数据传输不受同源策略限制,从而实现跨域通信。
5. postMessage:
- 通过使用
postMessage API
,页面间可以相互发送消息,包括跨域的页面。- 这种方式适用于不同窗口之间的通信,例如 iframe 和父窗口之间的通信。
6. Nginx 反向代理:
- 在服务器端使用
Nginx
等反向代理服务器,将前端的请求转发到后端服务器上,实现跨域访问
7.CORS Anywhere:
CORS Anywhere
是一个中间代理
服务器,可以将跨域请求转发到目标服务器,并在响应中添加 CORS 头,从而实现跨域访问。- 需要注意使用该方法时需要保证代理服务器的可信性和安全性
8. 浏览器插件
- chrome,edg,Firefox 浏览器都可以安装跨域插件
- 不过只在开发阶段自己玩玩就行了