2023.04.07 - 前端常用解决跨域问题的方案

1. JSONP：JSONP（JSON with Padding）是一种前端跨域请求的方式，它利用了 HTML 中的 <script> 标签没有跨域限制的特点，通过动态创建 <script> 标签，构造一个特殊的 URL，让服务端返回一段指定的 JavaScript 代码，然后在本地执行这段代码以达到跨域请求数据的目的。JSONP 具有兼容性好、简单易用的优点，但它不支持 POST 请求等复杂请求方式，而且容易遭受恶意攻击和信息泄露。因此在使用 JSONP 时，一定要选择可信任的接口和服务商，并且进行相应的防范和处理。

2. CORS（跨域资源共享）：CORS 是 HTML5 中提出的一种解决跨域请求的方式，通过设置 HTTP 头部的 Origin 和 Access-Control-Allow-* 等字段，让服务端决定是否接受来自其它域的请求。CORS 可以实现简单请求（请求方法为 GET/POST/HEAD，且没有自定义请求头），也可以实现带有预检请求的复杂请求（请求方法为 PUT/DELETE/OPTIONS，或带有自定义请求头等），具有良好的兼容性和安全性。

3. 代理转发：代理转发是指将跨域请求发送给同源的服务端，再由服务端向目标服务器发送请求，并将相应的数据返回给前端。通过代理转发，可以有效地绕开浏览器的跨域限制，同时也可以对请求进行相应的处理和过滤。缺点是需要服务端的支持，同时可能造成服务器的压力增加。

4. WebSocket：WebSocket 是 HTML5 中提出的一种全双工通信协议，可以实现客户端与服务端的实时数据传输。WebSocket 采用了与 HTTP 不同的协议头，可以绕过浏览器的跨域限制，并支持与服务端进行双向数据通信。但是，WebSocket 兼容性较差，需要服务端的支持，并且可能存在安全问题。

5. JSONP的升级版：JSONP 有可能被篡改，导致安全问题，可以使用基于 WebSocket 的跨域请求来进行替代，例如使用 socket.io 和 JSONP-comet 等技术。这些技术利用 WebSocket 进行双向通信和数据传输，同时也可绕开浏览器的跨域限制，实现了更加安全、实时和高效的跨域请求。

需要注意的是，以上这些方式各有优缺点，具体的选择应该根据不同的应用场景和需求进行综合考虑。如果选择使用 JSONP，为了保证安全性和正确性，应该对响应数据进行合法性校验和异常处理，同时谨慎选择服务提供商，并遵守其规范和要求。