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

Posted 2023-03-04

【中文标题】我收到 CORS 错误 - cors() 不工作

【英文标题】：I got CORS error -- cors() is not working

【发布时间】：2021-02-15 11:04:28

【问题描述】：

在 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);

...

我收到了这些错误：

【参考方案1】：

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

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