跨域1. vite代理服务器 vue.config.js 2. JSONP（JSON with Padding）前端动

1. vite代理服务器

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://api.example.com', // 目标服务器地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

2. JSONP（JSON with Padding）

前端动态创建 <script> 标签，将请求的 URL 作为 src 属性，同时在 URL 中添加回调函数名作为参数，例如 http://api.example.com/data?callback=callback。JSONP 的缺点是只支持 GET 请求，并且安全性较低。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script>
        function callback(data) {
            console.log(data);
        }
        const script = document.createElement('script');
        script.src = 'http://api.example.com/data?callback=callback';
        document.body.appendChild(script);
    </script>
</body>

</html>

3. CORS（Cross-Origin Resource Sharing）

CORS 是现代浏览器支持的跨域解决方案，它需要服务器端进行配置。服务器可以通过设置响应头来允许跨域请求，常见的响应头有：

Access-Control-Allow-Origin：指定允许访问该资源的外域 URI。可以设置为具体的域名，也可以设置为 * 表示允许所有域名访问。
Access-Control-Allow-Methods：指定允许的请求方法，例如 GET, POST, PUT, DELETE 等。
Access-Control-Allow-Headers：指定允许的请求头。

以下是一个使用 Node.js 和 Express 框架设置 CORS 的示例：

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

// 处理路由
app.get('/data', (req, res) => {
    res.json({ message: 'Hello, cross-origin!' });
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

4. 使用 Nginx 反向代理

Nginx 是一个高性能的 Web 服务器和反向代理服务器，可以通过配置 Nginx 来解决跨域问题。以下是一个简单的 Nginx 配置示例：

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/your/frontend;
        index index.html;
    }

    location /api {
        proxy_pass http://api.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

这样，当客户端访问 example.com/api 时，Nginx 会将请求转发到 http://api.example.com 服务器上，从而实现跨域请求。