如何解决Access Control Allow Origin CORS及ERR_CONNECTION_RESET错误

错误根因 #

1. Access-Control-Allow-Origin是响应头，需要第三方API服务端返回时携带，你在前端AJAX请求里加这个头属于错误操作，额外的自定义请求头会触发CORS预检请求，第三方服务未处理预检请求会直接断开连接，触发ERR_CONNECTION_RESET报错。
2. 你在自有Tomcat上配置的CorsFilter完全不生效：CORS规则由被调用的目标服务（也就是202.61.117.90的接口服务）控制，你自己服务的CORS配置只能解决其他来源跨域调用你接口的问题，无法解决你前端跨域调用第三方接口的问题。
3. 本地调用正常的核心原因是你本地环境大概率开启了浏览器跨域限制禁用插件，或者本地测试时是后端直接调用接口绕过了浏览器CORS规则，并非配置生效。

修复步骤 #

• 首先删除前端AJAX代码中的错误headers配置，修改后的前端代码参考：

<script>
$(document).ready(function(){
  $.ajax({
    type: "GET" ,
    // 后续改成自有服务的代理接口地址
    url: "/CRM/proxy/gripsQuery?GRN_NO=192021225551499528" ,
    dataType: "xml" ,
    success: function(xml) {
      $(xml).find('GRIPS_EPAYMENT').each(function(){
        var grnNo = $(this).find('GRN_NO').text();
        var grnDate = $(this).find('GRN_DATE').text();
        var brnNo = $(this).find('BRN_NO').text();
        $("#grndate").append(grnDate);  
        $("#brnno").append(brnNo);  
      });    
    }      
  });
});
</script>

• 新增自有服务端代理接口：在你的Tomcat服务中新增接口，比如路径为/CRM/proxy/gripsQuery，后端通过HttpClient、OkHttp等工具透传参数调用第三方APIhttp://202.61.117.90/GRIPS/ChallanDetails/query.do，拿到XML响应后直接返回给前端即可，服务端调用不受浏览器CORS规则限制，不会出现跨域错误。
• 如果你要坚持前端直接调用，需要联系第三方API的运维人员，让他们在接口响应头中添加你的线上服务地址http://103.240.91.230:8080到CORS白名单，该方案通过率极低，优先使用服务端代理方案。

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