Redux 内部 axios 的自定义 Header 问题答案

【问题标题】：Custom Header problem with axios inside ReduxRedux 内部 axios 的自定义 Header 问题
【发布时间】：2020-03-25 02:24:15
【问题描述】：

我正在尝试使用自定义标头访问登录 API。首先我得到了 CORS 错误：

从源“http://localhost:3000”访问“URL”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上

然后我通过 NO CORS 插件禁用了 CORS。现在我得到：

从源“http://localhost:3000”访问“URL”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：它没有 HTTP ok 状态。

下面是我的代码：


    const userDetails = { email, password };

    let data = JSON.stringify({ 
          request : {
                    ascUser : 
                      {
                        userName : "xxx@sample.com",
                        password : "12345678"
                      }
                    }
    })
    return dispatch => {

      axios.request('URL', {data:data},
        {headers: {
        'Content-Type': 'application/json',
        'x-transId' : '****',
        'x-channel-id' : '***' 
      }}
      )
      .then(res => res.json())
      .then(res => {
        console.log(res)
          if(res.error) {
              throw(res.error);
          }
          dispatch(
            userLogin({
            ...userDetails
          })
        );
          return res.products;
      })
      .catch(error => {
        console.log(error)
      }
      ) 
  };
}```

【问题讨论】：

在您的后端应用程序上启用 CORS。如果您使用的是 express，请参考此expressjs.com/en/resources/middleware/cors.html
什么是 NO CORS 插件？是客户端还是服务器端？
有没有其他方法可以在不禁用后端 CORS 的情况下做到这一点？因为它在 Android 和 POSTMAN 中运行良好。
Chrome 没有 CORS 扩展
@SaranKumar 是后端快递应用吗？

标签： reactjs redux cors xmlhttprequest axios

【解决方案1】：

你需要在后端使用这个https://www.npmjs.com/package/cors（可能在你的nodejs服务器上）

npm i cors --save

var express = require('express')
var cors = require('cors')
var app = express()    
app.use(cors())

【讨论】：

Header 设置不正确，和 Redux 有什么关系吗？
它与 cors 而不是 REDUX 有关，请按照我的示例并给我您的反馈
问题是它的第三方API。所以，我试图从客户端解决它。
你无法从客户端解决它，这是不可能的。后端已将 cors 实现到 origin 'localhost:3000'。随意支持其他答案，但没有一个可以在浏览器中工作:)