Redux内部带有axios的自定义标题问题

Question

我正在尝试使用自定义标头访问登录API。首先，我收到了CORS错误“从原点'http://localhost:3000'对'URL'的XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-Origin '标头存在于所请求的资源上“。然后，我通过NO CORS插件禁用了CORS。现在，我被”从源'http://localhost:3000'访问'URL'上XMLHttpRequest的访问已被CORS策略阻止：预检请求未通过访问控制检查：它没有HTTP正常状态“

下面是我的代码：

    const userDetails = { email, password };

    let data = JSON.stringify({ 
          request : {
                    ascUser : 
                      {
                        userName : "[email protected]",
                        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)
      }
      ) 
  };
}```

Answer 1

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

1. npm i cors --save

2。

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

Answer 2

您可以使用带有暴露标头选项的cors包将服务器端配置为接受自定义标头：

const cors = require("cors");

var corsOptions = {
  exposedHeaders: ["x-transId", "x-channel-id"]
};

app.use(cors(corsOptions));

注意：必须在任何路由定义之前定义此代码。