我收到CORS错误-- cors()不工作

Question

登录server.js后，如果成功，将显示React组件。我想从React组件接收用户信息。

服务器端使用端口5000，客户端使用端口3000。客户端组件按如下方式接收信息。

const Main = () => {

  async function makeGetRequest() {
    let res = await axios.get('http://localhost:5000/auth/google/callback');

    let data = res.data;
    console.log(data, 'data');
  }
  makeGetRequest();

  return (
    <div>
      <h2>Main Page</h2>
        Main Page
    </div>
  );
};

export default Main;

我知道express有cors，并尝试在server.js中使用它，但它不起作用。

我已经尝试使用单独的cors和cors选项，但它不起作用。

// server.js

const app = express();

const corsOptions = {
  origin: 'http://localhost:5000',
  credentials: true,
};

app.use(cors(corsOptions));

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});

app.use(
  session({
    secret: process.env.SECRET_CODE,
    resave: false,
    saveUninitialized: true,
    cookie: {
      maxAge: 60 * 60 * 1000,
    },
  })
);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());

app.use('/', indexRouter);
app.use('/auth', authRouter);
app.use('/main', mainRouter);

...

我得到了以下错误：

​

​

Answer 1

cors origin应该使用端口3000，因为您希望允许来自该域的请求。

此外，您也不需要手动设置cors标头，cors()会为您处理。