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

Question

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

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

我花了大约10个小时对此进行研究。我尝试过的事情没有什么区别：

• 我尝试将 CORS 添加到我的 Express 后端
• 我尝试将 graphql 端点作为 HTTPS 提供服务
• 在主 app.js 服务器文件中移动 app.use(express.static)

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

Github 链接：https://github.com/LucaProvencal/thedrumroom Live 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 错误。

谢谢你的帮助...

Answer 1

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

'http://localhost:PORT'我只是将开发中的所有端点替换为'/graphql'. 我假设 localhost 意味着运行代码的本地机器。但在 Heroku 上运行的应用程序不会指向 localhost。在我们的例子中，Express 服务器在 url ( https://powerful-shore-83650.herokuapp.com/ ) 上提供服务...

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