React使用Axios请求AWS接口报CORS错误但原生JS正常怎么解决

问题根本原因 #

你遇到的CORS错误和Axios本身无关，是两次请求的属性差异导致的：

• 原生JS发送的是CORS简单请求，不会触发预检OPTIONS请求：你设置的Content-Type是application/x-www-form-urlencoded，没有自定义请求头，符合简单请求的判定规则，AWS端点就算没有配置预检CORS规则也能正常响应。
• Axios发送的是需要预检的非简单请求：你设置了Content-Type: application/json，还额外添加了Authorization自定义头，浏览器会先发送OPTIONS预检请求校验跨域权限，你的AWS端点没有给OPTIONS请求返回正确的CORS响应头，所以直接被拦截。
  另外你的代码存在逻辑冗余：登录接口本身是用来获取授权token的，请求阶段还未拿到有效token，完全不需要携带Authorization头，这个多余配置也是触发预检的原因之一。

修复方案 #

方案1：对齐原生请求逻辑（快速验证） #

修改Axios配置，和原生JS请求参数保持一致，变成简单请求绕开预检：

// 可引入qs库做表单序列化，也可手动拼接请求体字符串
import qs from 'qs';

async SendRequest(method, url, callback, body){       
    axios.request({
        method: 'POST',
        // 不要用JSON.stringify，转成表单格式
        data: qs.stringify(body),
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            // 移除多余的Authorization头
        },
        url: url
    }) 
    .then(response => {
        console.log(response);
        callback({
            status: response.status,
            data: response.data,
        });
    })
    .catch(err => {
        console.log(err);
        callback({
            status: err.status,
            data: err,
        });
    });
}

方案2：配置AWS端点CORS规则（根治） #

如果后续需要用JSON格式传参、携带Authorization头调用其他接口，直接在你的AWS服务端（大概率是API Gateway）配置CORS规则即可：

• 允许你的业务源（http://localhost:3000、Github Pages域名）跨域访问
• 允许OPTIONS、POST、GET等所需请求方法
• 允许Content-Type、Authorization等自定义请求头
  配置完成后部署生效，就可以正常发送非简单跨域请求。

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