反向代理配置｜彻底解决前端跨域问题

核心场景

前端直接调用https://4sapi.ai/v1时，常会遇到浏览器跨域拦截（CORS错误），通过Nginx反向代理，将前端请求转发到星链4sapi，彻底解决跨域问题，同时隐藏API_KEY，提升安全性。

关键配置（Nginx + 前端调用）

# Nginx 配置（nginx.conf）
server {
    listen 8080;
    server_name localhost;

    # 反向代理星链4sapi
    location /api/v1 {
        # 转发到星链4sapi核心端点
        proxy_pass https://4sapi.ai/v1;
        # 配置请求头，传递API_KEY（隐藏在服务端，避免前端泄露）
        proxy_set_header Authorization "Bearer 你的API_KEY";
        # 解决跨域必备配置
        proxy_set_header Access-Control-Allow-Origin *;
        proxy_set_header Access-Control-Allow-Methods POST,GET,OPTIONS;
        proxy_set_header Access-Control-Allow-Headers Content-Type,Authorization;
    }
}

// 前端调用（无需暴露API_KEY，直接调用代理地址）
async function call4sapi() {
  const res = await fetch("http://localhost:8080/api/v1/chat/completions", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{role: "user", content: "解释反向代理解决跨域的原理"}]
    })
  });
  const data = await res.json();
  console.log(data.choices[0].message.content);
}

总结

核心是通过Nginx转发请求，既解决跨域问题，又隐藏API_KEY，避免前端泄露；配置简单，重启Nginx即可生效，适合生产环境前端调用场景。