localhost webapp 上的本地开发和 Cors 策略阻止的 localhost 访问

Question

我正在尝试开发 web 应用程序和 api，但我遇到了 cors 阻塞。 这对我来说有点新，但我想变得更好。

所以我有一个用于 api 的快速服务器：

const express = require('express')
const cors = require('cors')
const app = express()

module.exports = app.post('/posttest/', cors(), async (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.json({ msg: 'WHOAH with CORS it works!' })
})

这是在 http://localhost:3000 本地提供的 “posttest”是我路线的上述模块。

const posttest = require('./src/routes/posttest.js')
const server = require('http').createServer();
const { Router } = require('express');

server
  .on(
    'request',
    Router({ mergeParams: true })
    .use( posttest )
  )
  .on('listening', () =>{
    console.log('listeing');
  })
  .on('error', () => {
    console.log('ERROR!!!!');
  })
  .listen(3000);

然后我的网络应用程序使用 fetch 发出 Post 请求：

fetch('http://localhost:3000/posttest/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({text:'test'}),
    mode: 'cors' }) .then( (res) => {   //resolve }) .catch( (err) => {   //error    });

我还应该提到，Web 应用程序在 localhost:8080 本地提供服务

所以问题是，当我尝试发出发布请求时，我得到了

以下错误。访问 'http://localhost:3000/posttest/' 获取 来自原点 'http://localhost:8080' 已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

为了它的价值，我正在使用 chrome。 那么这里发生了什么？我认为如果我包含res.header('Access-Control-Allow-Origin', '*'); 它将解决我的问题。 Postman 可以成功访问路由。但是当我使用浏览器时，它会被拒绝。如果我将服务器和 Web 应用程序投入生产，也会发生同样的事情。我错过了什么？你能像我五岁一样解释吗？

提前感谢您的所有帮助。

Answer 1

pre-flight request 是一个OPTIONS 请求，您的cors() 处理程序仅附加到POST 请求（通过.post）。使用

  app.use(cors());

全局禁用 CORS（并回答飞行前的问题）。你也可以enable pre-flight requests单条路线：

  app.options("/posttest/", cors());
  app.post('/posttest/', cors(), async (req, res, next) => {  
   res.json({ msg: 'WHOAH with CORS it works!' });
  });