如何解决与React、Axios、Express配合使用时的CORS错误？

sqserrrh 于 2022-12-12 发布在 iOS

关注(0)|答案(2)|浏览(195)

我正在使用passport js进行简单的twitter登录，但是当调用twitter路由时，我得到了CORS错误。
server.js

const express = require("express");
const session = require("express-session");
const dotenv = require("dotenv");
const userLoginRoutes = require("./routes/userLoginRoute");
const cors = require("cors");
const app = express();

app.use(cors());
app.use(function (req, res, next) {
  res.header(
    "Access-Control-Allow-Origin",
    "*"
  ); // update to match the domain you will make the request from
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
app.get("/api/auth/twitter", passport.authenticate("twitter"));

在此处调度操作

import {
  USER__LOGIN,
  USER__LOGIN__FAILURE,
  USER__LOGIN__SUCCESS,
} from "../constants/loginconstants";

const axios = require("axios");

// login action
export const userLoginAction = () => async (dispatch) => {
  try {
    dispatch({
      type: USER__LOGIN,
    });
    const config = {
      header: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin" : "*"
      },
    };
    const { data } = await axios.get(`/api/auth/twitter`, config);
    dispatch({
      type: USER__LOGIN__SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: USER__LOGIN__FAILURE,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

在客户端的package.json中，

"proxy": "http://127.0.0.1:3001",

此外，我在网络选项卡中看不到Access-Control-Allow-Origin，请参见此处，x1c 0d1x
设置Access-Control-Allow-Origin时是否出现错误？
我想不出，我哪里错了。我用过cors，甚至手动将原点设置为 *。
Cors错误，我得到，

axios

来源：https://stackoverflow.com/questions/73037832/how-to-solve-cors-error-when-using-with-react-axios-express

2条答案

按热度按时间

sy5wg1nm1#

在node.js快速API中添加CORS

为了将CORS添加到我们的API中，您可以通过不同的方式来完成这一任务。可以手动编写一个快速中间件，告诉您的服务器允许哪些请求以及来自哪个来源，或者使用CORS npm库，它为我们完成了许多繁重的工作。
在这篇文章中，我们将使用cors npm库，它可以作为一个快速的中间件轻松传递。首先，通过运行命令在服务器端应用程序上安装调用。
npm install cors
然后，您可以将其作为中间件添加，如下所示

const express = require("express");
const cors = require("cors");
const app = express();
//use cors as middleware
app.use(cors())

上面的代码是将CORS添加为Express中间件的默认方式，但是如果您想指定客户端应用程序的来源，该怎么办？让我们学习在node js应用程序中配置CORS的不同方式。

允许来自所有域的请求。

为了让我们的node.js服务器能够处理来自应用程序中所有域的所有请求，我们必须配置cors，并向它传递一个带有通配符值的原始密钥，如下所示。

//other imports
app.use(
  cors({
    origin: “*”,
  })
);

上述配置的问题在于，客户端应用程序不能共享cookie或身份验证头，即使凭证密钥以true值传递，如下所示。

**注：**CORS选项CORS中的原始关键字采用不同的选项类型，如字符串、布尔值、函数或数组。

//other imports
app.use(
  cors({
    origin: “*”,
    credentials: true
  })
)

另一个需要注意的重要事项是，无论何时，只要您不在客户端请求API中传递withCredentials: true，就不要在cors config服务器端传递credentials: true，尤其是在您使用通配符（*）作为请求头的来源时。

通知CORS将起点设置为请求起点

为了配置CORS以将原点设置为请求原点，只需将布尔真值传递给原点键，如下所示;

//other imports
app.use(
  cors({
    origin: true,
    credentials: true
  })
)

虽然这将允许您的客户端应用程序与您的服务器共享cookie和auth标头，但这也不是很安全，除非它是一个开放的API。

Configure CORS to set the origin to a single domain

为了配置cors以将origin设置为单个域，只需将一个字符串true值传递给origin key，如下所示;

//other imports
app.use(
  cors({
    origin: “http://localhost:3000”,
    credentials: true
  })
)

上述配置将允许您的客户端应用程序仅接受来自http：//localhost：3000的请求，并与您的服务器共享Cookie和身份验证标头。此配置非常安全，但不够可靠。

配置CORS以将来源设置为多个白名单域

如果微服务应用程序托管在不同的域上，或者您希望不同的域向您的API发出请求，该怎么办呢？您可以简单地配置cors，通过一组允许的域传递到原始键，如下所示;

//other imports
const allowedDomains = [“http://localhost:3000”, “http://localhost:4000”, “http://localhost:6000”]
app.use(
  cors({
    origin: allowedDomains,
    credentials: true
  })
)

上述配置将允许您的客户端应用程序接受来自数组中列出的任何上述域的请求，并与您的服务器共享Cookie和身份验证标头。
CORS中间件可以作为全局中间件在单个路由上传递，但上面显示的所有方法都是在应用中全局配置CORS的方法。让我们简要了解一下如何在单个路由上传递CORS中间件。请注意，上面描述的所有方法也可以在您的路由上使用。

const allowedDomains = [“http://localhost:3000”, “http://localhost:4000”, “http://localhost:6000”]
app.get(“/api/posts”, 
  cors({
    origin: allowedDomains,
    credentials: true
  }), 
  (req, res) =>{
    res.send(“everything still works”)
})

注意：当你在客户端请求withCredentials: true选项时，确保你的CORS配置被作为一个选项传递credentials: true，否则cookie不会被共享。需要注意的是，无论何时使用通配符（）作为源，都不要使用 *withCredentials：false**在客户端和凭据上：服务器上的true。

赞(0）回复(0）举报 2022-12-12

91zkwejq2#

检查您的URL

适用于Google云功能用户

如果您的URL端点中有拼写错误（例如函数名称），浏览器实际上会显示CORS错误。
我有一个错字在我的网址和浪费了大量的时间搜索CORS修复。

赞(0）回复(0）举报 2022-12-12

我来回答

如何解决与React、Axios、Express配合使用时的CORS错误？

2条答案

检查您的URL

相关问题

热门标签

最新问答