Redux中使用Axios携带自定义Header调用登录API的问题

先给你理清楚问题的来龙去脉，再一步步解决：

首先，先修正你的axios代码！ #

你当前的axios.request调用方式是错误的——它只接受一个配置对象，你却传了三个参数，这会导致请求配置混乱，甚至可能是预检请求失败的原因之一。修正后的代码如下：

const userDetails = { email, password };
let data = JSON.stringify({ request : { ascUser : { userName : "xxx@sample.com", password : "12345678" } } })
return dispatch => {
  axios.request({
    url: 'URL', // 替换成你的实际API地址
    method: 'POST', // 传data必须用POST（或PUT）方法
    data: data,
    headers: { 
      'Content-Type': 'application/json', 
      'x-transId' : '****', 
      'x-channel-id' : '***' 
    }
  })
  // 注意：axios会自动解析JSON响应，不需要手动调用res.json()
  .then(res => {
    console.log(res.data) // 响应数据存在res.data里
    if(res.data.error) {
      throw(res.data.error);
    }
    dispatch( userLogin({ ...userDetails }) );
    return res.data.products;
  })
  .catch(error => { console.log(error) } )
};

接下来分析CORS相关的两个错误 #

1. 初始的「No 'Access-Control-Allow-Origin' header」错误 #

因为你是从http://localhost:3000（前端域名）向另一个域名的API发请求，而且还带了自定义Header（x-transId、x-channel-id），浏览器会先发送一个OPTIONS类型的「预检请求」，用来确认服务器是否允许这个跨域请求。

如果服务器没有在OPTIONS响应中返回以下关键头信息，浏览器就会拦截请求：

• Access-Control-Allow-Origin：明确允许的来源（比如你的http://localhost:3000）
• Access-Control-Allow-Headers：必须包含你自定义的那几个Header
• Access-Control-Allow-Methods：允许的请求方法（比如POST）

2. 使用No CORS插件后的「It does not have HTTP ok status」错误 #

这类插件只是临时绕过浏览器的部分CORS检查，但对于预检请求（OPTIONS），如果服务器本身没有返回200或204的成功状态码，浏览器还是会报错。而且更关键的是，No CORS模式下浏览器会限制你读取响应内容，就算请求成功你也拿不到返回的数据，完全不适合实际开发。

正确的解决方案 #

方案一：服务器端配置CORS（推荐，生产环境必须） #

这是根本解决办法，联系你的后端开发人员，在API服务器上配置CORS规则：

• 针对OPTIONS预检请求，返回200或204状态码
• 添加响应头：

  Access-Control-Allow-Origin: http://localhost:3000
  Access-Control-Allow-Methods: POST, OPTIONS
  Access-Control-Allow-Headers: Content-Type, x-transId, x-channel-id
  

  （如果需要携带Cookie，还要加Access-Control-Allow-Credentials: true）

配置完成后，浏览器就能正常处理跨域请求，不需要任何前端插件。

方案二：本地开发用代理（调试专用） #

如果你用的是Create React App、Vue CLI这类脚手架，可以配置代理让前端请求通过代理转发到API，这样浏览器会认为是同域请求，不会触发CORS检查。

比如Create React App，直接在package.json里加一行：

"proxy": "https://你的API基础地址.com"

然后把请求URL改成相对路径（比如/login），脚手架会自动帮你转发请求到目标API。

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