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

Posted 2023-03-08

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

【英文标题】："Not allowed to request resource" in Safari and "Blocked loading mixed active content" in Firefox. Perfect functionality in Chrome

【发布时间】：2019-09-28 12:18:27

【问题描述】：

我正在开发一个使用 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 直播 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 错误。

感谢您的帮助...

【参考方案1】：

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

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

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

【讨论】：

嗨，我遇到了完全相同的问题，但我使用的是 REST API 而不是 GraphQL。愿意帮我一把吗？

您好 Sajal，如果您提供更多背景信息，我愿意提供帮助。你想做什么？您的错误发生在哪里？

嗨卢卡，我的错误是完全一样的。我的网络应用程序在 Heroku 上运行，但我只能从 chrome（我的默认浏览器）发出网络请求以进行开发。每当我从其他浏览器和移动浏览器打开我的网络应用程序时，首页加载正常，但对于网络请求，我收到错误“不允许请求资源”。

所以在其他浏览器的localhost上运行时不起作用？这很奇怪。你在使用 Node/Express 吗？可以分享一下服务器文件吗？

【参考方案2】：

这也可能在本地开发过程中使用 HTTPS 运行前端，但使用 HTTP 运行后端。

这是因为 CORS 将两个 URL 视为具有相同的来源 "only when the scheme, host, and port all match"。匹配方案意味着匹配协议，例如都是http，或者都是https。

本地开发的一种解决方案是使用ngrok等工具代理后端。

---

假设前端使用一个环境变量来表示后端的 URL：

BACK_END_API_URL=http://localhost:3005。然后执行以下操作。

安装ngrok 确定后端正在运行的端口，例如3005 在命令行运行ngrok http 3005，这将建立http和https端点。两者最终都会将请求代理到同一个后端端点：http://localhost:3005 运行 ngrok 后，它将显示您可以使用的 http 和 https 端点。将与您正在使用的前端协议（例如 https）匹配的协议放入您的前端环境变量中，该变量指示后端的 URL，例如

BACK_END_API_URL=https://1234asdf5678ghjk.ngrok.io