javascript - React App 未与 Express 后端通信
问题描述
我无法通过 React 应用程序与生产中的 express 后端一起工作。在我的服务器上,我正在运行nginx
一个conf
看起来像这样的:
server {
listen 80 default_server;
server_name _;
# react app & front-end files
location / {
root /var/www/my-site;
try_files $uri /index.html;
}
# node api reverse proxy
location /api/ {
proxy_pass http://localhost:3000/;
}
}
reactbuild
文件夹的内容在/var/www/my-site
. 我在浏览器中输入我的服务器 IP,它加载索引页面没有任何问题。但是,当我点击登录按钮调用登录 API 时,出现以下错误:http://xxx.xxx.xx.x/api/onboard/login 404 (Not Found)
在我的 React 应用程序"proxy": "http://localhost:3000"
中package.json
(我知道它在生产中没有用,但它可以在我的机器上使用本地快速服务器本地工作)并且我的 API 端点看起来像这样:(/api/onboard/login
我正在使用 Fetch)
现在到快递服务器上,我server.js
是这样的:
const cors = require('cors');
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
const PORT = 3000;
app.use(cors({ credentials: true, origin: 'http://localhost:3000' }));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(function(_, res, next) {
res.header(
"Access-Control-Allow-Headers",
"x-access-token, Origin, Content-Type, Accept"
);
next();
});
require('./app/routes/onboard-routes')(app);
//etc...
app.listen(PORT, () => console.log(`Listening on http://loclalhost:${PORT}`));
一个示例路线:
app.post(
'/api/onboard/login',
[verifyLogin.checkLoginFields],
controller.login
);
我正在使用运行服务器NODE_ENV=production forever start server.js
只是为了澄清服务器在我的本地机器上使用localhost
上述所有设置并与我的 React 应用程序一起工作。它只是在我的远程生产服务器上不起作用。
谁能指出我正确的方向?不知道我做错了什么。谢谢
解决方案
推荐阅读
- python - 使用 .loc[] 提取行时出现 keyerror
- reactjs - 无法在不刷新页面的情况下自动更新 Reactjs/Material UI 列表
- bash - 在不使用文件的情况下连续组合两个同时运行的 shell 命令的输出行
- scala - 如何在 Scala 的“sbt”中设置条件构建过程?
- api - 获取更改公共 API 响应的通知
- css - 如何使用 webpack 导入样式?
- swift - 如何在 CoreData 中保存枚举
- php - 尝试读取数组错误的属性 - PHP REST 服务
- python - 集成在 Django 联系邮件表单中的 CKEDITOR(附件 PATH/URL)问题
- javascript - 没有数据广告位 google adsense vue