React应用集成WSO2时遭遇403跨域拒绝错误

• 检查deployment.toml的CORS配置有效性
  确保配置覆盖令牌请求的端点，且参数设置正确。示例配置如下：

  [cors]
  allow_origins = ["http://localhost:3000"]
  allow_methods = ["GET", "POST", "OPTIONS"]
  allow_headers = ["Authorization", "Content-Type"]
  allow_credentials = true
  expose_headers = ["Location"]
  

  注意：WSO2 IS 5.x版本需将配置放在<IS_HOME>/repository/conf/deployment.toml中，仅修改web.xml.j2可能不生效。

• 验证web.xml.j2的CORS过滤器映射
  确认过滤器映射到所有相关端点（如/*或/oauth2/*），且参数与deployment.toml一致。示例配置：

  <filter>
      <filter-name>CORS</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
          <param-name>cors.allowed.origins</param-name>
          <param-value>http://localhost:3000</param-value>
      </init-param>
      <init-param>
          <param-name>cors.allowed.methods</param-name>
          <param-value>GET,POST,OPTIONS</param-value>
      </init-param>
      <init-param>
          <param-name>cors.allowed.headers</param-name>
          <param-value>Authorization,Content-Type</param-value>
      </init-param>
      <init-param>
          <param-name>cors.support.credentials</param-name>
          <param-value>true</param-value>
      </init-param>
  </filter>
  <filter-mapping>
      <filter-name>CORS</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>
  

  修改后需重启WSO2服务器，确保配置生效。

• 排查React端请求配置
  确认Axios请求携带凭证信息，且Content-Type符合要求：

  axios.post('https://你的WSO2域名/oauth2/token', 请求数据, {
      withCredentials: true,
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      }
  })
  

• 清除缓存并重启服务
  浏览器可能缓存旧的CORS规则，强制刷新或清除缓存后重试；修改WSO2配置后必须重启服务器，避免配置未加载。

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