将 Front 部署到 firebae 回到 heroku 后，CORS 策略出错

如何解决将 Front 部署到 firebae 回到 heroku 后，CORS 策略出错

我们正在尝试我和我的朋友部署一个在本地完全运行的项目。

但是现在我们部署了它（前面是firebase，后面是heroku）， 现在每个请求我们都有 cors 政策

app.use(cors());

var allowCrossDomain = function (req,res,next) {
  res.header("Access-Control-Allow-Origin","*");
  res.header("Access-Control-Allow-Methods","GET,PUT,POST,DELETE,OPTIONS");
  res.header(
    "Access-Control-Allow-Headers","Content-Type,Authorization,Content-Length,X-Requested-With"
  );

  // intercept OPTIONS method
  if ("OPTIONS" == req.method) {
    res.send(200);
  } else {
    next();
  }
};

app.use(allowCrossDomain);

app.use(bodyParser.json());

app.use("/function",couponRoutes);

mongoose
  .connect(  `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASSWORD}@cluster0.qvs4c.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=majority`
  )
  .then(() => {
    app.listen(5000);
  })
  .catch((err) => {
    console.log(err);
  });

这就是后面的代码（我也试过没有allowcross域），但没有任何效果。

我们正在从前端执行常规 axios 请求，但它不起作用，希望得到帮助。

解决方法

您必须通过传递一个 javascript 对象来配置 cors，如下所示

const corsOptions = {
"origin": "*","methods": "GET,HEAD,PUT,PATCH,POST,DELETE","preflightContinue": false,"optionsSuccessStatus": 200
  "exposedHeaders": ['Content-Length','X-Requested-With',' Authorization','Content-Type'],}

app.use(cors(corsOptions))

你应该使用它而不是你的代码来让 cors 工作

如果您有多个来源，请使用以下代码段

var allowedOrigins = ['http://localhost:3000','http://yourapp.com'];
app.use(cors({
  origin: function(origin,callback){
    // allow requests with no origin 
    // (like mobile apps or curl requests)
    if(!origin) return callback(null,true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return callback(new Error(msg),false);
    }
    return callback(null,true);
  }
}));