CORS问题：Keycloak保护React与JAX-RS服务时的跨域报错如何解决？

修复方案 #

1. 修复Axios请求头格式错误 #

你在Axios拦截器中拼接Authorization头时缺少空格，会导致Token格式错误，Keycloak鉴权失败：
原代码：

config.headers['Authorization'] = 'Bearer' + token;

修改为：

config.headers['Authorization'] = 'Bearer ' + token;

2. 修正CORS过滤器配置 #

Access-Control-Allow-Credentials参数不能设为*，必须显式指定为true，否则浏览器会拒绝带身份凭证的跨域请求：
原过滤器代码：

cres.getHeaders().add("Access-Control-Allow-Credentials", "*");

修改为：

cres.getHeaders().add("Access-Control-Allow-Credentials", "true");

3. 配置CORS过滤器优先执行+放行OPTIONS请求 #

你遇到的CORS错误本质是受保护接口的鉴权失败响应没有携带CORS头：因为Keycloak的鉴权过滤器执行顺序在你的自定义CORS过滤器之前，当Token无效/预检请求（OPTIONS请求不带Authorization头）被Keycloak拦截时，响应直接返回，不会走到你的CORS过滤器添加响应头。
需要在web.xml中添加如下配置：

<!-- 注册CORS过滤器 -->
<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-class>你的CORS过滤器全类名</filter-class>
</filter>
<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <!-- 配置过滤器优先执行 -->
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

<!-- 放行所有OPTIONS请求的鉴权 -->
<security-constraint>
    <web-resource-collection>
        <web-resource-name>OPTIONS Preflight</web-resource-name>
        <url-pattern>/*</url-pattern>
        <http-method>OPTIONS</http-method>
    </web-resource-collection>
    <!-- 无auth-constraint代表所有用户都可访问 -->
</security-constraint>

4. 配置Wildfly信任Keycloak自签名证书 #

你的Keycloak使用自签名HTTPS证书，Wildfly默认不信任该证书，会导致Keycloak适配器验证Token时失败，返回无CORS头的错误响应。你需要将Keycloak的自签名证书导入Wildfly运行使用的JDK信任库中：

# 示例命令，替换对应路径和别名
keytool -import -alias keycloak-cert -file 你的keycloak自签名证书路径.crt -keystore $JAVA_HOME/jre/lib/security/cacerts
# 默认信任库密码为 changeit

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