时间戳

首页 > 解决方案 > Safari 中的“不允许请求资源”和 Firefox 中的“阻止加载混合活动内容”。Chrome 中的完美功能

heroku - Safari 中的“不允许请求资源”和 Firefox 中的“阻止加载混合活动内容”。Chrome 中的完美功能

问题描述

我正在使用 React 前端和 Express 后端开发应用程序，并通过 Apollo 设置 GraphQL（我正在关注和修改教程https://www.youtube.com/playlist?list=PLN3n1USn4xlkdRlq3VZ1sT6SGW0-yajjL）

我目前正在尝试部署，并且正在使用 Heroku 进行部署。在部署之前，一切都在我的本地机器上运行良好，在 Google Chrome 中的 Heroku 上运行良好。但是，我分别在 Safari 和 Firefox 中得到了上述错误。想知道为什么在这些浏览器中会发生这种情况以及如何解决。

我花了大约10个小时来研究这个。我尝试过的事情没有任何区别：

我找不到很多其他的东西可以尝试。我所看到的所有地方似乎都在说 CORS 解决了这个问题，但我的仍然存在。

Github 链接：https ://github.com/LucaProvencal/thedrumroom 直播 Heroku 应用程序：https ://powerful-shore-83650.herokuapp.com/

App.js（快速后端）：

const cors = require('cors')
// const fs = require('fs')
// const https = require('https')
// const http = require('http')

app.use(express.static(path.join(__dirname, 'client/build')));
app.use(cors('*')); //NEXT TRY app.use(cors('/login')) etc...
app.use(cors('/*'));
app.use(cors('/'));
app.use(cors('/register'));
app.use(cors('/login'));

app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});


app.get('/register', (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});


server.applyMiddleware({ app }); // app is from the existing express app. allows apollo server to run on same listen command as app

const portVar = (process.env.PORT || 3001) // portVar cuz idk if it will screw with down low here im tired of dis

models.sequelize.sync(/*{ force: true }*/).then(() => { // syncs sequelize models to postgres, then since async call starts the server after
    app.listen({ port: portVar }, () =>
      console.log(` ApolloServer ready at http://localhost:3001${server.graphqlPath}`)
    )
    app.on('error', onError);
    app.on('listening', onListening);
});


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

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

完整文件在 Github 上，我试图只发布上面的相关部分。

预期的结果是它适用于所有浏览器。从我的研究看来，由于 Heroku 服务于 HTTPS，Safari 和 Firefox 不允许对 HTTP 的请求（这是 graphql 服务器所在的位置，http://localhost:3001/graphql '）。当我尝试在 HTTPS 上服务 Apollo 时，Heroku 刚刚崩溃，给了我 H13 和 503 错误。

谢谢你的帮助...

标签： herokuapolloreact-apolloapollo-serverexpress-graphql

解决方案

打算删除它，因为这是一个愚蠢的问题，但也许它会在未来帮助某人：

我只是'http://localhost:PORT'用'/graphql'. 我假设 localhost 意味着本地机器运行代码。但是在 Heroku 上运行的应用程序并不指向 localhost。在我们的例子中，快递服务器在 url ( https://powerful-shore-83650.herokuapp.com/ ) 上提供服务......

无论如何，我很高兴我找到了解决方案。我部署了一个完整的堆栈应用程序并连接到一个数据库。希望这篇文章可以节省很多人的时间。

推荐阅读