跨域复习整理，轻松搞定跨域难题
2024-02-12 01:28:30
跨域，又称跨域资源共享（Cross-Origin Resource Sharing，简称CORS），是指浏览器出于安全考虑，限制了一个域的脚本访问另一个域的资源。这种限制被称为同源策略（Same-Origin Policy）。跨域复习整理如下：
跨域的概念及成因
跨域问题是前端开发中经常遇到的问题，它本质上是一种安全限制。
不同源的请求需要带上身份信息（cookie/HTTP认证）的时候，浏览器会认为存在安全隐患，阻止这样的请求，这种机制称为跨域请求的安全限制机制。
同源策略规定了在同一个源中产生的资源只能在该源下使用。通俗来讲，就是源A不能访问和获取源B的资源。
跨域解决方案
JSONP
JSONP（JSON with Padding）是一种利用<script>标签来实现跨域请求的技术。原理是利用<script>标签可以跨域加载并执行其他域名的 JavaScript 脚本文件。JSONP 就是把要请求的数据以 JSON 的形式封装成一个 JavaScript 函数的参数，然后在目标域动态创建<script>标签，并指定这个 JavaScript 函数作为回调函数，即可实现跨域请求。
CORS
CORS（Cross-Origin Resource Sharing）是一种基于 HTTP 协议的跨域解决方案。它允许浏览器向不同源服务器发送跨域请求，从而解决同源策略带来的限制。CORS 的工作原理是，在浏览器发送请求之前，会先发送一个预检请求（Preflight Request）到服务器，询问服务器是否允许浏览器发送实际的请求。如果服务器允许，则会返回一个 Access-Control-Allow-Origin 头，其中包含允许跨域请求的源。
Nginx 反向代理
Nginx 反向代理是一种通过在客户端和服务器之间架设一个代理服务器来实现跨域请求的技术。原理是，客户端发送请求到代理服务器，代理服务器再把请求转发到真正的服务器，然后把服务器的响应返回给客户端。这样，客户端和服务器之间就不存在跨域问题了。
避免跨域
同源策略的限制
同源策略的主要限制包括：
- 脚本不能读取来自其他源的cookie和localStorage。
- 脚本不能跨源提交表单。
- 脚本不能跨源加载图片和样式表。
如何避免跨域
- 使用 CORS 跨域资源共享。
- 使用 JSONP 跨域请求。
- 使用 Nginx 反向代理。
- 使用 WebSocket 跨域通信。
- 使用 HTML5 postMessage 跨域通信。
希望这篇文章对您有所帮助，如果您还有任何问题，请随时问我！
