使用axios请求网络XML文件出现CORS跨域错误该如何解决？

问题核心原因 #

CORS是浏览器的同源安全限制规则，Access-Control-Allow-Origin、Access-Control-Allow-Methods都属于服务端要返回的响应头，你在前端请求头中添加这类配置完全无效，反而可能额外触发非简单请求的预检校验，加剧问题。
你直接在地址栏输入URL能正常打开，是因为浏览器直接导航的行为不会触发CORS校验，只有前端脚本发起的跨域请求才会被CORS规则限制。

可行解决方案 #

• 如果你有权限控制XML文件所在的服务端
  直接在服务端对应路由配置跨域响应头即可，推荐优先填写你的前端站点域名，不需要对外暴露服务可直接配置通配符：
  以Nginx为例，在XML文件对应的location块添加以下配置：

  location /folder/ {
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, OPTIONS';
      if ($request_method = OPTIONS) {
          return 204;
      }
  }
  

  Apache、Node.js等其他服务端都有对应的响应头配置逻辑，配置到XML文件的访问路由即可。
• 如果你没有权限修改目标服务端配置
  可以用自有后端做代理转发：前端请求同域名下的后端接口，后端服务去请求XML地址拿到内容后返回给前端，服务端之间的请求没有CORS限制。
  本地开发阶段也可以用框架自带的开发代理能力绕过跨域，比如Vue的vue.config.js、React的setupProxy.js都支持配置代理规则，把XML请求路径代理到目标域名。

修正后的前端代码 #

删除请求中无效的CORS相关头，简化后的代码如下：

const url="https://mydomain/folder/myxmlfile.xml";
await axios
  .get(url, {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
    },
  })
  .then((response) => console.log(response.data))
  .catch((err) => console.log(err));

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