前端访问后台接口存在跨域问题，如何处理解决

前端跨域问题 最实用、最常用解决方案

现在遇到的前端访问后台接口跨域 ，是开发中最常见 的问题，我给你用最简单、最落地的方式讲清楚，直接照着做就能解决。

---

一、什么是跨域？

只要 协议、域名、端口 任意一个不一样，浏览器就会阻止前端请求后台，报：

plaintext

No 'Access-Control-Allow-Origin' header is present

这就是跨域（CORS）。

---

二、最推荐、最通用、生产环境也用的方案

✅ 方案 1：用 Nginx 反向代理解决（强烈推荐）

你刚才正在学 Nginx，正好用它解决跨域最完美！

原理：

• 前端 → Nginx（同域）
• Nginx → 后台（服务器之间无跨域）

直接给你可复制的 Nginx 配置

nginx

server {
    listen 80;
    server_name localhost;

    # 前端页面（本地文件或前端服务）
    location / {
        root   D:/project/frontend;  # 你的前端本地路径
        index  index.html;
    }

    # 接口代理 /api/ 开头的请求全部转发给后台
    location /api/ {
        # 转发到你的真实后台地址
        proxy_pass http://127.0.0.1:8080/api/;

        # 解决跨域的请求头
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

前端请求方式

js

// 原来跨域写法
// axios.get("http://localhost:8080/api/user")

// 现在不跨域
axios.get("/api/user")

✅ 优点：

• 前端不用改代码
• 后台不用改代码
• 生产环境也能用
• 你现在学 Nginx，这个最适合你

---

三、其他常用方案（你也可以了解）

✅ 方案 2：后台服务直接开启 CORS（最简单）

让后台在响应头加跨域允许，浏览器就不拦截了。

Java SpringBoot 示例

java

运行

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
}

Node.js/Koa 示例

js

app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  await next();
});

---

✅ 方案 3：前端开发环境代理（vue /react/vite）

只用于本地开发，上线不能用。

Vue2 / Vue3 / Webpack

vue.config.js

js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true
      }
    }
  }
};

Vite

vite.config.js

js

export default {
  server: {
    proxy: {
      "/api": "http://localhost:8080"
    }
  }
};