Angular 4调用Java POST REST API时遇CORS错误的解决咨询

嘿，我来帮你捋清楚这个问题——你的GET请求能正常跑，但POST报CORS错，根本不是Angular需要设置什么CORS源头，核心问题出在浏览器的预检OPTIONS请求上，你的Java API没处理这个请求！

为什么会这样？ #

当你发送Content-Type: application/json的POST请求时，这属于浏览器定义的「复杂跨域请求」，浏览器会先自动发一个OPTIONS请求到服务器，确认服务器允许这个跨域操作（比如允许的方法、请求头）。但你现在的Java API只处理了POST请求，完全没管OPTIONS请求，所以浏览器收到的OPTIONS响应没有任何CORS头，直接判定跨域不允许，就报错了。

解决方案：处理OPTIONS预检请求 #

有两种方式可以解决，推荐第二种更通用的：

方法1：给单个接口添加OPTIONS处理

在你的UserService类里，给/adduser路径加一个OPTIONS方法的处理：

@OPTIONS
@Path("/adduser")
public Response handleAddUserOptions() {
    return Response.ok()
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD")
        .header("Access-Control-Allow-Headers", "Content-Type") // 必须允许Content-Type，因为你的请求带这个头
        .build();
}

方法2：用全局过滤器统一处理所有CORS请求（更推荐）

写一个全局的CORS过滤器，这样所有接口都不用单独处理OPTIONS，一劳永逸：

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CORSFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        // 设置允许的跨域源、方法和请求头
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type");
        
        // 如果是OPTIONS预检请求，直接返回200成功，不用走后续业务逻辑
        if ("OPTIONS".equalsIgnoreCase(((javax.servlet.http.HttpServletRequest) request).getMethod())) {
            httpResponse.setStatus(HttpServletResponse.SC_OK);
            return;
        }
        
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {}
}

然后在web.xml里配置这个过滤器，让它拦截你的API路径：

<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-class>com.yourpackage.CORSFilter</filter-class> <!-- 替换成你的过滤器所在包路径 -->
</filter>
<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/rest/*</url-pattern> <!-- 匹配你的API根路径 -->
</filter-mapping>

关于Angular代码的说明 #

你原来的Angular代码完全没问题，不需要设置什么CORS源头，保持原样就行。问题100%出在服务器端没处理预检请求上。

内容的提问来源于stack exchange，提问作者Nishant Varshney