实现跨域 - 技术栈

实现跨域有多种方式， CORS 和 @CrossOrigin 是服务端解决跨域的方式，而 JSONP 是一种客户端解决跨域的方式。以下是一些主要的跨域解决方案：

CORS (Cross-Origin Resource Sharing):
- 服务端设置： 服务端通过在响应头中添加 CORS 相关的信息，允许指定的域名或所有域名的访问。在 Express 框架中，可以使用 cors 中间件，而在其他后端框架中，需要手动设置响应头。
- 例子：
  ini 复制代码
```
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许所有域名访问
```
JSONP (JSON with Padding):
- 原理： 利用 <script> 标签没有跨域限制的特性，通过在页面上动态创建 <script> 标签，将跨域的数据作为 JavaScript 脚本执行。
- 例子：
  ini 复制代码
```
function jsonpCallback(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'https://lfsun.com/data?callback=jsonpCallback';
document.body.appendChild(script);
```

@CrossOrigin 注解（Spring Framework）:

服务端设置： 在 Spring Framework 中，可以使用 @CrossOrigin 注解在控制器方法上标记允许跨域访问的配置。

例子：

less 复制代码

@RestController
public class MyController {
    @CrossOrigin(origins = "http://allowed-origin.com")
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        // Handle request
    }
}

代理：
- 原理： 在同源策略下，浏览器允许通过代理的方式请求其他域的数据。通过在服务端设置代理，将请求发送到目标域，然后将结果返回给客户端。
- 例子： 配置反向代理，将请求转发到目标服务器。
  bash 复制代码
```
/api -> http://example.com/api
```
WebSocket:
- 原理： WebSocket 是一种双向通信协议，不受同源策略的限制。通过建立 WebSocket 连接，客户端和服务端可以实现实时的双向通信。
- 例子： 在客户端和服务端建立 WebSocket 连接。

选择使用哪种跨域方案通常取决于具体的需求和环境。CORS 是一种标准的、现代的解决方案，而 JSONP 通常用于兼容较老的浏览器。代理、WebSocket 等方式也可以根据实际情况选择。