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

前端跨域问题 最实用、最常用解决方案现在遇到的前端访问后台接口跨域是开发中最常见的问题我给你用最简单、最落地的方式讲清楚直接照着做就能解决。一、什么是跨域只要协议、域名、端口任意一个不一样浏览器就会阻止前端请求后台报plaintextNo Access-Control-Allow-Origin header is present这就是跨域CORS。二、最推荐、最通用、生产环境也用的方案✅ 方案 1用 Nginx 反向代理解决强烈推荐你刚才正在学 Nginx正好用它解决跨域最完美原理前端 → Nginx同域Nginx → 后台服务器之间无跨域直接给你可复制的 Nginx 配置nginxserver { 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 示例jsapp.use(async (ctx, next) { ctx.set(Access-Control-Allow-Origin, *); await next(); });✅ 方案 3前端开发环境代理vue /react/vite只用于本地开发上线不能用。Vue2 / Vue3 / Webpackvue.config.jsjsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };Vitevite.config.jsjsexport default { server: { proxy: { /api: http://localhost:8080 } } };