使用AJAX调用Express API时CORS跨域错误的排查与解决

浏览器原始拦截提示：从origin为null的页面发起对'http://localhost:5000/'的XMLHttpRequest请求被CORS策略阻止：响应头'Access-Control-Allow-Origin'包含无效值'null//undefined'。

• 前端把本该由服务端返回的CORS响应头，当成请求头手动加到了AJAX配置里，这类头本身不允许由前端发起的请求携带；这类自定义请求头还会被cors中间件错误识别，把请求头里的字段值拼接到响应头里，最终生成完全不符合规范的响应头值，直接触发浏览器拦截。
• 你是通过本地双击HTML文件的方式打开页面，页面运行在file协议下，浏览器识别到的请求源origin值为null，cors中间件默认配置遇到null源时，没有做兼容处理，进一步放大了响应头拼接错误的问题。
• 配置中同时出现Access-Control-Allow-Origin: *和Access-Control-Allow-Credentials: true的组合，本身就违反CORS规范：带凭证的跨域请求，响应头不允许使用通配符作为允许的源。
• 冗余配置带来的额外问题：beforeSend里写错了MimeType（把application/json写成了application/j-son），crossDomain: true的配置和实际场景不匹配，这些操作不会帮你解决跨域，反而会增加不必要的校验逻辑。

• 第一步：清理前端AJAX的冗余错误配置
  删掉所有手动写在headers里的Access-Control系列字段，删除多余的crossDomain: true配置，修正MimeType的拼写错误，调整后的可用AJAX代码如下：

  $.ajax({
    url: "http://localhost:5000/",
    type: "GET",
    headers: {
      "Accept": "application/json"
    },
    dataType: "json",
    beforeSend: function (x) {
      if (x && x.overrideMimeType) {
        x.overrideMimeType("application/json;charset=UTF-8");
      }
    },
    success: function (response) {
      console.log(response.data)
    },
    error: function (xhr, status) {
      console.log("Error " + status)
    }
  });
  

• 第二步：调整后端cors中间件配置
  替换掉原来默认的app.use(cors())写法，手动适配null源的开发场景，避免拼接出非法的响应头值：

  // 替换原默认cors配置
  app.use(cors({
    origin: function (origin, callback) {
      // 本地开发阶段直接放行所有来源，生产环境可替换为固定的域名白名单
      callback(null, true)
    },
    credentials: true
  }))
  

• 第三步：调整前端页面的启动方式
  长期开发不建议直接用file协议打开HTML文件，这种方式下origin永远为null，很容易触发各类浏览器安全策略拦截。可以通过本地静态服务把前端页面跑在http://localhost的自定义端口上，从http协议加载页面后，浏览器会生成明确的源标识，避免不必要的校验异常。

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