WSO2 API Manager 3.2.0 devportal跨域资源请求报错如何解决？

问题根因说明 #

你遇到的TypeError: NetworkError when attempting to fetch resource、Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource报错属于典型的浏览器同源策略拦截场景，Postman、带--insecure参数的curl不受浏览器同源策略约束，所以调用正常，问题本质是API网关的CORS配置不符合浏览器要求。

排查步骤 #

• 先核对devportal发起调用的API地址，与Postman/Curl调用的地址是否完全一致，重点检查协议（HTTP/HTTPS）、域名、端口是否有差异，比如devportal用HTTPS访问但调用的网关地址是HTTP也会触发跨域。
• 打开浏览器F12控制台的「网络」标签，找到报错请求对应的OPTIONS预检请求，检查该请求的响应状态是否为2xx，响应头是否包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers三个必填CORS字段。
• 检查WSO2 APIM全局CORS配置，配置文件路径为<APIM_HOME>/repository/conf/deployment.toml，定位[apim.cors]配置段，核对以下配置是否正确：

  [apim.cors]
  enable = true
  # 生产环境建议替换为devportal的实际源地址，格式为[协议://域名:端口]
  allowed_origins = ["*"]
  allowed_methods = ["GET", "PUT", "POST", "DELETE", "PATCH", "OPTIONS"]
  allowed_headers = ["authorization","Access-Control-Allow-Origin","Content-Type","SOAPAction"]
  # 若allowed_origins配置为*，allow_credentials必须设为false，否则浏览器会直接拦截
  allow_credentials = false
  

• 进入Publisher控制台，找到对应API的「Runtime Configurations」配置页，查看单API的CORS配置，确认没有错误覆盖全局CORS规则。
• 排查请求链路是否存在反向代理、WAF等中间件，确认中间件没有拦截OPTIONS请求，也没有删除、篡改网关返回的CORS响应头。
• 检查调用请求是否携带了自定义请求头，若有自定义头需要补充到allowed_headers配置列表中。

修复步骤 #

• 若全局CORS配置错误，修改deployment.toml配置后重启WSO2 APIM服务生效。
• 若单API CORS配置错误，在Publisher控制台修改配置后重新发布API即可。
• 若devportal与网关的协议/域名/端口不匹配，可将两者调整为同源，或者将devportal的完整源地址添加到allowed_origins列表中。
• 配置生效后清除浏览器缓存，重新打开devportal测试调用。

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