MERN API GET 请求 return Heroku 上的 404,适用于本地 Raspi 服务器
MERN API GET requests return 404's on Heroku, works on local Raspi server
我有一个 MERN 应用程序,我想在 Heroku 上托管。现在应用程序部署到 Raspberry Pi,那里一切正常,但是一旦它到达 Heroku,我所有的 API GET 请求都会导致 404 错误。我可以得到 React 前端,但其他任何东西都不起作用。 Mongo 部分托管在 Atlas 的沙盒层上,并被列入白名单以接受任何授权连接。
我尝试过的事情:
- Not routing /api calls to static React files via server.js
- 更新所有对端口号的引用以使用
process.env.PORT || 3001
- 在我的 React 客户端 package.json 中将我的代理从
localhost
切换到 127.0.0.1
- 使用以下配置重新配置我对 API 的 axios 调用:
const axiosConfig = {
proxy:{
host: '127.0.0.1',
port: process.env.PORT || 3001
}
};
我的 API 中的 GET 请求在 Heroku 上导致 404,并显示以下错误消息:xhr.js:173 GET https://builders-kit-0031.herokuapp.com/api/humidity 404 (Not Found)
.
我正在使用密钥文件向 Atlas 进行身份验证:
if(process.env.NODE_ENV === 'production'){
module.exports = require('./keys_prod');
} else {
module.exports = require('./keys_dev');
}
该文件引入了以下文件,它使用了我在 Heroku 的配置变量部分中设置的 MONGO_URI 和 SECRET_OR_KEY 字符串。
module.exports = {
mongoURI: process.env.MONGO_URI,
secretOrKey: process.env.SECRET_OR_KEY
};
我的代码设置为通过 Express 服务器为 React 提供服务(所有 React 内容都在 /client
文件夹中)。我目前正在使用 Heroku post 构建脚本进行部署,如下所示:"heroku-postbuild": "NPM_CONFIG_PRODUCTION=true NODE_ENV=production npm install --prefix client && npm run build --prefix client"
.
我想这就是我今天早上在这里研究这个问题以来发现的所有大热点。任何关于要尝试的事情的建议都将不胜感激。您可以查看我正在尝试部署的损坏版本 here。很高兴 post 任何其他代码片段,如果这有助于调试 - 不想 post 整个应用程序。提前致谢!
好的,我想我明白这是怎么回事了。这似乎与 baseURL 在 Axios 中的设置方式有关。
在本地开发过程中,我错误地分配了一个 IP 变量,然后像这样进行任何 API 调用:${ip}/api/whatever/whatever
我认为我在上面发布的 Axios 配置上是正确的,但我实际上需要做的是像这样设置 Axios:
const axiosInstance = axios.create({
baseURL: 'http://localhost:5000'
});
我将所有 API 调用都改为引用 axiosInstance
而不仅仅是 axios
,然后将它们全部更新为使用相对 URL。所有 API 调用和数据库连接现在都按预期在暂存中工作。希望这对以后的人有帮助!
我有一个 MERN 应用程序,我想在 Heroku 上托管。现在应用程序部署到 Raspberry Pi,那里一切正常,但是一旦它到达 Heroku,我所有的 API GET 请求都会导致 404 错误。我可以得到 React 前端,但其他任何东西都不起作用。 Mongo 部分托管在 Atlas 的沙盒层上,并被列入白名单以接受任何授权连接。
我尝试过的事情:
- Not routing /api calls to static React files via server.js
- 更新所有对端口号的引用以使用
process.env.PORT || 3001
- 在我的 React 客户端 package.json 中将我的代理从
localhost
切换到127.0.0.1
- 使用以下配置重新配置我对 API 的 axios 调用:
const axiosConfig = {
proxy:{
host: '127.0.0.1',
port: process.env.PORT || 3001
}
};
我的 API 中的 GET 请求在 Heroku 上导致 404,并显示以下错误消息:xhr.js:173 GET https://builders-kit-0031.herokuapp.com/api/humidity 404 (Not Found)
.
我正在使用密钥文件向 Atlas 进行身份验证:
if(process.env.NODE_ENV === 'production'){
module.exports = require('./keys_prod');
} else {
module.exports = require('./keys_dev');
}
该文件引入了以下文件,它使用了我在 Heroku 的配置变量部分中设置的 MONGO_URI 和 SECRET_OR_KEY 字符串。
module.exports = {
mongoURI: process.env.MONGO_URI,
secretOrKey: process.env.SECRET_OR_KEY
};
我的代码设置为通过 Express 服务器为 React 提供服务(所有 React 内容都在 /client
文件夹中)。我目前正在使用 Heroku post 构建脚本进行部署,如下所示:"heroku-postbuild": "NPM_CONFIG_PRODUCTION=true NODE_ENV=production npm install --prefix client && npm run build --prefix client"
.
我想这就是我今天早上在这里研究这个问题以来发现的所有大热点。任何关于要尝试的事情的建议都将不胜感激。您可以查看我正在尝试部署的损坏版本 here。很高兴 post 任何其他代码片段,如果这有助于调试 - 不想 post 整个应用程序。提前致谢!
好的,我想我明白这是怎么回事了。这似乎与 baseURL 在 Axios 中的设置方式有关。
在本地开发过程中,我错误地分配了一个 IP 变量,然后像这样进行任何 API 调用:${ip}/api/whatever/whatever
我认为我在上面发布的 Axios 配置上是正确的,但我实际上需要做的是像这样设置 Axios:
const axiosInstance = axios.create({
baseURL: 'http://localhost:5000'
});
我将所有 API 调用都改为引用 axiosInstance
而不仅仅是 axios
,然后将它们全部更新为使用相对 URL。所有 API 调用和数据库连接现在都按预期在暂存中工作。希望这对以后的人有帮助!