React.js中用Axios请求接口返回200状态码但出现CORS错误如何解决

问题根因 #

这是浏览器同源策略下的CORS跨域限制导致的：

• 浏览器发起的异步请求（Axios、原生fetch都属于这类）默认会校验跨域规则，如果目标API的响应头没有返回允许你当前域名访问的Access-Control-Allow-*相关字段，浏览器会直接拦截响应、抛出跨域错误。
• Postman工具、浏览器地址栏直接访问URL的场景不受CORS规则限制，所以可以正常拿到响应结果。

你尝试换POST方法、换请求库都无法解决，就是因为问题本质不是请求方法或者请求库的问题，是浏览器层面的跨域校验拦截。

解决方案 #

本地开发场景 #

1. 配置开发代理转发请求
   所有前端工程化脚手架都支持本地开发代理，会把匹配规则的请求转发到目标域名，规避跨域限制。以Vite项目为例，配置如下：

// vite.config.js
export default {
  server: {
    proxy: {
      '/dc-api': {
        target: 'https://citizenatlas.dc.gov',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dc-api/, '')
      }
    }
  }
}

配置后修改你的请求地址即可：

let fetchDCWardUrl = '/dc-api/newwebservices/locationverifier.asmx/findLocation2?str=2%252015th%2520St%2520NW,%2520Washington,%2520DC%252020024,%2520USA&f=json';

Vue CLI、React CRA项目也有对应的代理配置规则，逻辑完全一致。
2. 临时调试可以用浏览器禁用CORS的插件，或者启动浏览器时加上--disable-web-security参数关闭安全限制，仅适用于本地调试，不要在日常浏览时使用。

线上生产场景 #

1. 新增后端中转层：前端请求你自己的后端服务，由后端服务发起请求调用该DC公开API，再把结果返回给前端，服务端之间的请求不受CORS限制。
2. 联系API运营方添加你的域名到跨域白名单，公共API一般不会单独开放白名单，该方案可行性较低。

补充说明：你当前请求URL里的参数存在双重编码问题（空格被编码为%2520而非标准的%20），但因为该API兼容了这种格式所以不影响正常返回，不是本次报错的原因。

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