无后端服务时使用Axios调用开放API出现CORS错误能否正常请求？

你遇到的是浏览器同源策略限制导致的CORS跨域错误，两个核心认知误区需要先纠正：

1. Access-Control-Allow-Origin这类配置是服务端响应头，需要目标接口的服务端返回才有效，前端在请求头里加这类配置完全无效，反而会让普通GET请求变成非简单请求触发CORS预检，加重跨域问题。
2. Postman请求正常是因为Postman不属于浏览器环境，不受同源策略约束，不会自动做跨域校验，和接口是否为开放API没有关联。

• 方案1：本地开发阶段开启React代理配置。你使用的ASP React模板可以直接在项目根目录的package.json中添加配置项 "proxy": "https://api.first.org"，之后发请求时url直接写/data/v1/teams即可，本地开发服务器会自动转发请求并处理跨域问题。
• 方案2：使用公共CORS代理服务。原理是代理服务收到你的请求后转发给目标API，返回响应时会自动加上允许跨域的响应头，你只需要把目标API地址拼接到代理服务地址之后请求即可，这类公共代理仅适合开发测试场景使用，不可用于生产环境。
• 方案3：确认目标API是否支持JSONP调用，JSONP天然规避跨域限制，但仅支持GET请求，Axios本身不支持JSONP，需要额外做适配处理。

useEffect(()=>{
    var config = {
      method: 'get',
      // 若使用本地proxy配置，url填'/data/v1/teams'
      url: '对应方案的请求地址',
      // 删掉所有Access-Control开头的请求头，无需额外配置
    };
    
    axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });
  },[])

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