由于 CORS 错误，Axios 调用被阻止

Posted 2023-03-04

【中文标题】由于 CORS 错误，Axios 调用被阻止

【英文标题】：Axios call getting blocked due to CORS error

【发布时间】：2021-10-17 04:48:51

【问题描述】：

我有一个使用 Express server 进行服务器端渲染的反应应用程序。我想使用 axios 发出 POST 请求，但它被 CORS 错误阻止： “从源 'http://localhost:4249' 访问 XMLHttpRequest 在 'https://xyz/abc' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-请求的资源上存在 Allow-Origin' 标头。

我在我的服务器调用中添加了允许源头和 cors 模块后尝试过，但没有成功

    import cors from "cors";
const server = express();
server.use((req, res, next) => 
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
);
server.use(express.static("dist"));
server.use(cors());

这是 axios 请求：

const headers = 
    Accept: "application/json",
    "x-ms-version": "2019-07-11",
    Authorization: token,
    "x-ms-date": date,
    "x-ms-documentdb-isquery": true,
    "Content-Type": "application/query+json",
    "x-ms-documentdb-query-enablecrosspartition": "true",
    "cache-control": "no-cache",
    "Access-Control-Allow-Origin": "*",
  ;

  useEffect(() => 
    axios
      .post(
        "https://xyz/abc",
        data,
        
          headers: headers,
        
      )
      .then(function (response) 
        setres(response.data);
      )
      .catch(function (error) 
        console.log(error);
      );
  , []);

Webpack 配置：

module.exports = 
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader",
        ,
      ,
      
        test: /\.(sass|css|scss)$/,
        use: ["style-loader", "css-loader"],
      ,
    ],
  ,
;

【问题讨论】：

你为什么要与HTTP localhost 通信HTTPS:xyz？

【参考方案1】：

我以前也遇到过这个问题，我就是这样做的：

app.js（后端）

server.use(cors(
  origin: '<YOUR_FRONTEND_URL_PATH>',
  methods: 'GET,HEAD,POST,PUT,DELETE',
  preflightContinue: false,
  credentials: true
));

axios 请求：

const resp = await axios.post(
     apiUrl,
     params,
     
        withCredentials: true,
        timeout: 10000
     
);

【讨论】：

这对我不起作用。仍然出现同样的错误