HEROKU卫星CORS问题

i7uq4tfw 于 2022-11-13 发布在其他

关注(0)|答案(8)|浏览(224)

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

这是错误

从源'https://mighty-citadel-71298.herokuapp.com'访问'https://whispering-shore-72195.herokuapp.com/users/login'处的XMLHttpRequest已被CORS策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。
我试了很多方法都没有...有什么想法吗？

heroku

来源：https://stackoverflow.com/questions/53875548/cors-problems-on-heroku

8条答案

按热度按时间

9jyewag01#

您已从源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上尝试了simple，它工作得很成功。
您可以尝试登录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应使用Asynchronous而不是Sync。

赞(0）回复(0）举报 2022-11-13

tzcvj98z2#

您需要确定这是否确实是CORS问题或API代码中断。
如果这是一个CORS问题，请按照上面的建议在后端代码中处理CORS，或者使用cors包。
然而，通常情况下，问题是你的代码正在崩溃，而你只是不知道。例如，在我的例子中，我没有将nodemon添加到依赖项中，我的start脚本依赖于Heroku找不到的nodemon。因此，有可能你的代码在dev中工作正常，但在prod中崩溃。
下面是如何在Heroku中找到代码的哪一部分被破坏的方法：
1.在浏览器开发工具中检查您的网络。如果响应为503 Service Unavailable（如下所示），则再次表明您的代码正在中断。

1.打开遇到问题的项目后，找到Heroku Jmeter 板右上角的更多按钮。

1.单击更多按钮后，从显示的下拉列表中选择查看日志。您现在应该可以看到跟踪跟踪的日志。如果您没有看到错误，请尝试在代码中做一些小的更改，然后重新部署，同时再次查看日志。在我的示例中，如下所示，nodemon是崩溃的原因。

赞(0）回复(0）举报 2022-11-13

jhiyze9q3#

我处理过同样的问题，我认为你的问题不是CORS。你能测试一下你的服务器日志吗？在我的情况下，我有一个包的问题，这就是我得到503也没有“访问控制-允许起源”头，CORS错误。当我修复包和jwt问题我的CORS问题解决了！

赞(0）回复(0）举报 2022-11-13

jyztefdp4#

我在Heroku中部署后遇到了同样的问题，在代码的不同点使用console.log（），我可以看到如下错误消息：'RangeError最大调用堆栈大小超过...'.这是一个NodeJs错误，我通过在我的包底部添加以下代码修复了它.json：
“决议”：{“fs-电容器”：“3.0.0版”}
如果你觉得合适就告诉我。

赞(0）回复(0）举报 2022-11-13

k7fdbhmy5#

我也犯了同样的交叉错误
在我的情况下，我需要的是简单地确保后端服务器（在Heroku上）运行良好，通过查看日志从设置（在Heroku应用程序设置），你也可以通过这个命令行检查日志heroku日志--tail

赞(0）回复(0）举报 2022-11-13

m528fe3b6#

我可能会迟到，但这可能对别人有帮助。
我在Heroku中也遇到过与CORS有关的同样的问题。我在CORS中尝试了所有的Origin组合和许多其他变通方法。
但后来我发现这是TypeScript编译中的一个问题。