WSO2 IS 5.7.0对接Angular 6遇CORS拦截，求解决方案及替代方案

首先，先纠正你代码里的一个小误区：你不需要在Angular的请求头里设置Access-Control-Allow-Origin，这个是服务器返回给客户端的响应头，客户端请求时添加它毫无意义，反而可能干扰正常的CORS校验。先把这块去掉，修改后的请求代码应该是：

const httpHeaders = {
  headers: new HttpHeaders()
    .set('Content-Type', 'application/x-www-form-urlencoded')
};
this.http.post<any>(`http://localhost:9443/commonauth`, payload, httpHeaders);

接下来，针对你已经做了部分配置但仍有CORS错误的情况，给你几个排查和解决方向：

1. 完善WSO2 IS的Web应用CORS配置 #

你已经在oauth和authenticationendpoint的web.xml里添加了CORS Filter，但可能还有遗漏：

• 确认CORS Filter的jar包位置：确保cors-filter-1.7.0.wso2v1.jar同时存在于webapps/oauth/WEB-INF/lib和webapps/authenticationendpoint/WEB-INF/lib目录下，你之前只提到复制到authenticationendpoint，oauth的lib目录也需要放。
• 调整Filter的顺序：把CORS Filter放在web.xml的最顶部，确保它是第一个被执行的Filter，避免其他Filter先拦截请求导致CORS头无法正常添加。
• 补充更多CORS参数：除了cors.allowOrigin，建议添加以下参数来覆盖更多场景：

  <init-param>
    <param-name>cors.supportedMethods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
  </init-param>
  <init-param>
    <param-name>cors.supportedHeaders</param-name>
    <param-value>Content-Type,Authorization,X-Requested-With,Accept</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposedHeaders</param-name>
    <param-value>Location,Authorization</param-value>
  </init-param>
  <init-param>
    <param-name>cors.supportsCredentials</param-name>
    <param-value>true</param-value>
  </init-param>
  

2. 使用WSO2 IS官方自带的CORS配置（推荐） #

WSO2 IS 5.7.0已经内置了CORS支持，不需要手动添加第三方Filter，直接修改<IS_HOME>/repository/conf/deployment.toml文件，添加以下配置：

[cors]
allow_origins = ["*"]
allow_methods = ["GET", "POST", "OPTIONS", "HEAD", "PUT"]
allow_headers = ["Content-Type", "Authorization", "X-Requested-With"]
allow_credentials = true
expose_headers = ["Location", "Authorization"]
max_age = 3600

配置完成后重启WSO2 IS服务，这是官方推荐的方式，兼容性更好。

3. 配置嵌入式Tomcat的全局CORS #

如果上面的方法都无效，可以直接在WSO2 IS使用的嵌入式Tomcat中配置全局CORS：

1. 打开<IS_HOME>/repository/conf/tomcat/catalina-server.xml
2. 在<Host>标签内部添加以下Valve配置：

   <Valve className="org.apache.catalina.filters.CorsFilter"
          cors.allowed.origins="*"
          cors.allowed.methods="GET,POST,HEAD,OPTIONS,PUT,DELETE"
          cors.allowed.headers="Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization"
          cors.exposed.headers="Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Location,Authorization"
          cors.support.credentials="true"
          cors.preflight.maxage="3600" />
   

3. 重启WSO2 IS服务，这个配置会对所有Web应用生效。

4. 替代方案：使用反向代理绕过CORS #

如果不想在服务器端配置CORS，也可以通过Angular的反向代理来解决：

1. 在Angular项目根目录创建proxy.conf.json文件，内容如下：

   {
     "/commonauth": {
       "target": "http://localhost:9443",
       "secure": false,
       "changeOrigin": true
     }
   }
   

2. 启动Angular应用时使用代理配置：ng serve --proxy-config proxy.conf.json
3. 修改Angular的请求地址为相对路径：this.http.post<any>(/commonauth, payload, httpHeaders)
   这样请求会先发送到Angular的开发服务器，再由服务器转发到WSO2 IS，因为是同域名请求，就不会触发CORS校验了。

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