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

这是错误

访问 XMLHttpRequest 在 'https://whispering-shore-72195.herokuapp.com/users/login' 来自原点 'https://mighty-citadel-71298.herokuapp.com' 已被 CORS 阻止 政策：没有“Access-Control-Allow-Origin”标头出现在 请求的资源。

我尝试了很多方法，但一无所获……有什么想法吗？

Answer 1

我在 Heroku 中部署后遇到了同样的问题，在代码的不同点使用 console.log()，我可以看到如下错误消息：“RangeError Maximum call stack size exceeded...”。 这是一个 NodeJs 错误，我通过在 package.json 底部添加此代码来修复它：

“决议”：{ “fs 电容器”：“3.0.0” }

让我知道它是否适合你。

Answer 2

我在 Heroku 和我的后端遇到了类似的问题，现在托管在 vercel 中。

如果您使用环境变量，请确保在您的 vercel 应用程序中设置这些变量，或者如果您在其他任何地方托管，请先检查一下。环境变量！

Answer 3

您的问题与 CORS Heroku 服务器的服务不可用有关。由于它是一项免费服务，因此每小时的调用次数限制为 50 个。请尝试按照答案中的建议使用您自己的 CORS 服务器作为中间件或自行托管 CORS-Anywhere

Answer 4

您需要确定这确实是 CORS 问题还是您的 API 代码有问题。

如果是 CORS 问题，请按照上面的建议在后端代码中处理 CORS 或使用 cors 包。

但是，问题往往是您的代码正在破坏，而您只是不知道。例如，就我而言，我没有将nodemon 添加到依赖项中，而我的start 脚本依赖于Heroku 找不到的nodemon。因此，您的代码可能在 dev 中运行良好，但在 prod 中中断。

您可以通过以下方法找到代码在 Heroku 中的哪一部分出错：

1. 在浏览器开发工具中检查您的网络。如果响应是503 Service Unavailable，如下所示，这再次表明您的代码正在破坏。
2. 打开遇到问题的项目后，找到 Heroku 仪表板右上角的 更多 按钮。
3. 从单击更多按钮后显示的下拉列表中选择查看日志。您现在应该看到跟踪跟踪的日志。如果您没有看到错误，请尝试对代码进行任何小的更改并重新部署，同时再次查看日志。就我而言，如下所示，nodemon 是崩溃的原因。

Answer 5

我处理过同样的问题，我认为你的问题不是 CORS。你能测试你的服务器日志吗？在我的情况下，我遇到了一个包问题，这就是我得到 503 的方式，也没有“Access-Control-Allow-Origin”标头，CORS 错误。当我修复包和 jwt 问题时，我的 CORS 问题解决了！。

Answer 6

您已经从源 https://mighty-citadel-71298.herokuapp.com 跨源域 https://whispering-shore-72195.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 错误：

错误：secretOrPrivateKey 必须有值

请尝试使用process.env.JWT_KEY || 'Require key here!!!',，并在您的环境中设置您的JWT_KEY 或使用|| 作为服务器上的默认密钥。

也许它会解决你的问题。

推荐：

我对您的代码有一些建议：

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