javascript - HEROKU 上的 CORS 问题

Question

我在 Heroku 上遇到 CORS 问题。

这是我在服务器上的代码

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
require('dotenv').config()

import filmRoutes from './api/routes/films'
import userRoutes from './api/routes/users'

const app = express()

const DBNAME = process.env.DB_USER 
const DBPASSWORD = process.env.DB_PASS


mongoose.connect(`mongodb://${DBNAME}:${DBPASSWORD}@ds157422.mlab.com:57422/filmbase`, {useNewUrlParser: true})

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
  next();
});

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.use('/films', filmRoutes)
app.use('/users', userRoutes)


export default app;

这是我的发帖请求

  CheckLogin = () => {
    const data = {
      name: this.state.formInput.login.value,
      password: this.state.formInput.password.value
    }
    axios.post('https://whispering-shore-72195.herokuapp.com/users/login', data)
    .then(response=>{
      console.log(response);
      const expirationDate = new Date(new Date().getTime() + response.data.expiresIn * 1000)
      localStorage.setItem('token', response.data.token)
      localStorage.setItem('expirationDate', expirationDate)
      this.context.loginHandler()
    })
    .catch(err=>{
      console.log(err)
    })

    console.log(data);
  }

这是错误

Access to XMLHttpRequest at 'https://whispering-shore-72195.herokuapp.com/users/login' from origin 'https://mighty-citadel-71298.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试了很多方法都没有...有什么想法吗？

Answer 1

您在 https://whispering-shore-72195.herokuapp.com 上跨源域来自产地https://mighty-citadel-71298.herokuapp.com

你可以试试npm cors package作为中间件而不是您的自定义中间件。 CORS 包允许您进行多次配置，并且非常易于使用。

简单使用(启用所有 CORS 请求)

import express from 'express';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import cors from 'cors';
require('dotenv').config()

import filmRoutes from './api/routes/films'
import userRoutes from './api/routes/users'

const app = express()

const DBNAME = process.env.DB_USER 
const DBPASSWORD = process.env.DB_PASS


mongoose.connect(`mongodb://${DBNAME}:${DBPASSWORD}@ds157422.mlab.com:57422/filmbase`, {useNewUrlParser: true})

/*app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
  next();
});*/

app.use(cors()); // <---- use cors middleware

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.use('/films', filmRoutes)
app.use('/users', userRoutes)


export default app;

编辑:

我已经测试了您的客户端从 https 调用登录到您的服务器，并且它在没有 CORS 问题的情况下工作。也许您已成功修复它。

我在 StackBlitz 上尝试过使用简单的并且运行成功。

您可以尝试登录https://js-53876623.stackblitz.io/并在检查时查看网络选项卡并查看 OPTIONS (200 status) 和 POST (404 not found) (因为我不知道您数据库中的任何用户)

编辑 2018 年 12 月 22 日 - 下午 7:18

我已经在我的本地试过你的代码，也许你没有测试和处理所有的错误，这很不幸地导致你的应用程序崩溃。

我已经运行了您的代码并注意到问题可能是 jsonwebtoken 错误:

Error: secretOrPrivateKey must have a value

请尝试使用 process.env.JWT_KEY || “此处需要 key !!!”，，并在您的环境中设置您的 JWT_KEY 或使用 || 作为服务器上的默认 key 。

也许它会解决您的问题。

推荐:

我对你的代码有一些建议:

• 请使用 User.findOne() 而不是 User.find()
• 请使用app.use(cors());
• jsonwebtoken 在服务器上运行时应该使用异步而不是同步。