Angular最新CLI版本CORS配置及生产环境实现方案咨询

看起来你踩了CORS里一个很常见的坑——把服务器响应头当成请求头加在了前端，而且没处理POST触发的OPTIONS预请求！我来一步步帮你解决这个问题，完全贴合你用Jersey做后端、Angular做前端的场景：

第一步：先纠正你的Angular代码错误 #

你在POST请求里添加的Access-Control-Allow-Origin、Access-Control-Allow-Credentials这些头，是服务器返回给浏览器的响应头，前端请求时加这些完全没用，反而会干扰浏览器的预请求检查！

修改你的authentication方法，只保留业务需要的请求头（比如你用的X-Custom-Header）：

public authentication(email, password) {
  console.log("POST WITH HEADERS");
  const body = { email: email, password: password };
  // 只添加实际业务需要的请求头，去掉所有CORS相关的请求头
  const headers = new HttpHeaders().set('X-Custom-Header', 'your-custom-value');
  
  this.http
    .post('http://192.168.31.73:8080/myjersey/rest/hello/dd', body, { headers })
    .subscribe(
      (data) => console.log('认证成功', data),
      (error) => console.error('认证失败', error)
    );
}

fetchData方法保持原样即可，因为GET属于简单请求，浏览器不会触发预请求，所以之前能正常工作。

第二步：核心解决——在Jersey后端配置CORS #

POST请求属于复杂请求，浏览器会先发送一个OPTIONS预请求，检查服务器是否允许跨域。你的问题本质是后端没处理这个OPTIONS请求，也没返回正确的CORS响应头。下面是两种Jersey配置方式，选一种就行：

方式1：全局CORS过滤器（推荐） #

创建一个全局过滤器，自动处理所有请求的OPTIONS预请求，并添加CORS响应头：

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;
import javax.ws.rs.core.Response;
import javax.ws.rs.ext.Provider;
import java.io.IOException;

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {
        // 允许的来源，生产环境请替换成你的Angular域名（比如https://your-prod-domain.com）
        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        // 允许的HTTP方法
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
        // 允许的请求头，包含你前端用的X-Custom-Header
        responseContext.getHeaders().add("Access-Control-Allow-Headers", "X-Custom-Header, Content-Type, Authorization");
        // 是否允许携带凭证（比如Cookie，不需要可以设为false）
        responseContext.getHeaders().add("Access-Control-Allow-Credentials", "true");
        // 预请求的缓存时间（单位秒），减少重复OPTIONS请求
        responseContext.getHeaders().add("Access-Control-Max-Age", "3600");

        // 直接处理OPTIONS预请求，返回200状态码
        if (requestContext.getMethod().equals("OPTIONS")) {
            responseContext.setStatus(Response.Status.OK.getStatusCode());
        }
    }
}

然后把这个过滤器注册到你的Jersey应用：

• 如果用ResourceConfig配置：

  import org.glassfish.jersey.server.ResourceConfig;
  
  public class JerseyConfig extends ResourceConfig {
      public JerseyConfig() {
          // 注册你的资源类所在包
          packages("your.resource.package.name");
          // 注册CORS过滤器
          register(CORSFilter.class);
      }
  }
  

• 如果用web.xml配置：

  <servlet>
      <servlet-name>Jersey Web App</servlet-name>
      <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
      <init-param>
          <param-name>jersey.config.server.provider.packages</param-name>
          <!-- 同时包含资源类包和过滤器类包 -->
          <param-value>your.resource.package.name;your.filter.package.name</param-value>
      </init-param>
      <load-on-startup>1</load-on-startup>
  </servlet>
  

方式2：单个资源方法添加CORS注解（适合局部配置） #

如果不想全局配置，也可以在Jersey资源方法上添加@CrossOrigin注解（需要Jersey 2.13及以上版本）：

import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import org.glassfish.jersey.server.mvc.Viewable;
import javax.ws.rs.CrossOrigin;

@Path("/hello")
public class HelloResource {

    @GET
    @Path("/dd")
    @Produces(MediaType.APPLICATION_JSON)
    @CrossOrigin(origins = "*", allowedHeaders = "X-Custom-Header", methods = {GET, POST, OPTIONS})
    public String getHello() {
        return "{\"message\": \"Hello World\"}";
    }

    @POST
    @Path("/dd")
    @Produces(MediaType.APPLICATION_JSON)
    @CrossOrigin(origins = "*", allowedHeaders = "X-Custom-Header", methods = {GET, POST, OPTIONS})
    public String authenticate(String body) {
        // 这里写你的认证逻辑
        return "{\"status\": \"success\"}";
    }
}

生产环境CORS最佳实践 #

• 不要用*作为允许来源：替换成你实际的Angular生产域名（比如https://your-production-app.com），多域名可以用逗号分隔。
• 限制允许的方法和头：只开放你实际用到的HTTP方法（比如GET、POST）和请求头，不要全部开放。
• 如果需要携带凭证（比如Cookie）：Access-Control-Allow-Origin不能用*，必须指定具体域名，同时前端请求要添加withCredentials: true（Angular里在HttpClient请求选项中设置）。

为什么GET正常POST异常？ #

因为GET属于简单请求，浏览器不会发送OPTIONS预请求，只要服务器返回Access-Control-Allow-Origin头就能通过检查；而POST（尤其是带自定义头或非表单格式的请求体）属于复杂请求，浏览器会先发送OPTIONS预请求验证权限，如果服务器没处理这个请求或返回的CORS头不符合要求，就会报错。

内容的提问来源于stack exchange，提问作者Feroz Siddiqui