Angular对接Java后端触发CORS错误，求正确解决方案

嘿，咱们来好好梳理下怎么解决这个CORS问题——你试过的几种方法没生效，核心原因大概率是没抓住CORS的本质：CORS是后端的安全策略，前端的proxy只是开发环境的临时方案，.htaccess如果不是部署在Java后端的服务器上根本没用。下面给你分场景讲正确的处理方式：

你之前的proxy配置可能没完全到位，正确步骤是这样的：

1. 在项目根目录（或src下）创建proxy.conf.json，配置要匹配的前端路径和后端地址，注意如果后端接口没有前缀，要加路径重写：

{
  "/api/*": {
    "target": "http://你的Java后端地址:端口",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/api": ""} // 比如后端接口是http://xxx:8080/user，前端请求写/api/user，proxy会转发成http://xxx:8080/user
  }
}

2. 打开angular.json，找到serve配置，添加proxyConfig指定你的proxy文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名:build",
    "proxyConfig": "src/proxy.conf.json" // 这里要对应你的proxy文件位置
  }
}

3. 重启ng serve，前端请求时要写/api/xxx（而不是直接写后端地址），这样proxy才会自动转发请求，绕开浏览器的CORS检查。

CORS的核心是后端要在响应头里返回Access-Control-Allow-Origin等字段，前端做再多都没用。根据你的Java后端类型，给你几种常用配置方式：

如果是Spring Boot项目（最常见） #

方式1：全局CORS配置（推荐） #

创建一个配置类，统一处理所有接口的CORS：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有接口
                .allowedOrigins("*") // 生产环境建议指定具体前端域名，比如"https://你的前端域名.com"
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法
                .allowedHeaders("*") // 允许所有请求头，包括你的Authorization Token
                .allowCredentials(true); // 如果需要携带Cookie或Token，必须开启这个
    }
}

方式2：局部注解配置 #

如果只想给某个Controller或方法开启CORS，直接加@CrossOrigin注解：

@RestController
@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE})
public class YourController {
    // 你的接口方法
}

如果是非Spring Boot的Java项目（比如传统SSM+Tomcat） #

可以通过自定义Filter来配置CORS：

public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        
        // 设置允许的域名、方法、请求头
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, X-Requested-With");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        
        // 处理OPTIONS预检请求，直接返回200
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }
}

然后在web.xml中注册这个Filter：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>你的包路径.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

• proxy.conf.json：可能是没在angular.json中配置启用，或者路径匹配规则不对（比如后端接口没有/URL前缀，但你配置了/URL/*，前端请求又没加/URL）；
• .htaccess：这是Apache服务器的配置文件，如果你的Java后端部署在Tomcat、Jetty或者Spring Boot内置Tomcat上，这个文件完全不会生效；
• httpOptions：只是设置前端请求头，和CORS无关——CORS要求后端返回允许的响应头，前端设置请求头不解决跨域问题。

• 用Postman直接调用后端接口，查看响应头里有没有Access-Control-Allow-Origin，如果没有，说明后端配置没到位，这时候前端怎么折腾都没用；
• 开发环境用proxy的话，打开浏览器Network面板，看请求地址是前端的localhost地址，而不是后端地址，说明proxy已经生效。

内容的提问来源于stack exchange，提问作者El Hombre Sin Nombre