[英]Restful API works locally but angular frontend won't work when deployed to heroku
所以正如标题中提到的，我有这个项目在我的本地主机上运行，但由于我已经部署到 heroku 它没有。 我仍然可以通过 api 访问数据库并显示 json 但前端文件不起作用。
在主页上我刚得到无法 GET /
服务器.js
'use strict' const express = require('express'); const app = express(); const bodyParser = require('body-parser'); // req.body const cors = require('cors'); // 8080 const mongoose = require('mongoose'); const uriUtil= require('mongodb-uri'); let patients = require('./data'); const mongodbUri = 'mongodb://*********:***********@ds056009.mlab.com:56009/pt-db'; const mongooseUri = uriUtil.formatMongoose(mongodbUri); const dbOptions = {}; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true})); app.use(cors()); //app.get('/', function(req, res) { //res.sendFile(__direname + '/index.html') //}); app.use('/api/patients', require('./api/patients/routes/post_patient')); app.use('/api/patients', require('./api/patients/routes/get_patients')); app.use('/api/patients', require('./api/patients/routes/get_patient')); app.use('/api/patients', require('./api/patients/routes/put_patient')); app.use('/api/patients', require('./api/patients/routes/delete_patient')); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { mongoose.connect(mongooseUri, dbOptions, (err) => { if (err) { console.log(err); } console.log(`Our app is running on port ${ PORT }`); }); });
公共/js/app.js
(function() { 'use strict'; var app = angular.module('patientsApp', []); app.controller('patientsController', function($scope, $http) { $http.get('api/patients') .then(function(response) { $scope.patients = response.data; }); $scope.savePatient = function(patient) { $http.post('api/patients', patient) .then(function(response) { $scope.patients.push(response.data); }); } }); })();
公共/index.html
<!DOCTYPE html> <html ng-app="patientsApp"> <head> <title>Patient DB</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body ng-controller="patientsController"> <div class="container"> <div class="col-sm-6"> <form ng-submit="savePatient(patient)"> <div class="form-group"> <input type="text" placeholder="First Name" ng-model="patient.first_name" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Last Name" ng-model="patient.last_name" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Hospital Number" ng-model="patient.hosp_num" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Consultant" ng-model="patient.consultant" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Treatment Site" ng-model="patient.treat_site" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Treatment Group" ng-model="patient.treat_group" class="form-control"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="col-sm-6"> <ul class="list-group"> <li class="list-group-item" ng-repeat="patient in patients"> <h4>Patient Name: {{patient.first_name + ' ' + patient.last_name}}</h4> <p>Hospital Number: {{patient.hosp_num}}</p> <p>Consultant: {{patient.consultant}}</p> <p>Treatment Site: {{patient.treat_site}}</p> <p>Treatment Group: {{patient.treat_group}}</p> </li> </ul> </div> </div> <script src="node_modules/angular/angular.js"></script> <script src="/app.js"></script> </body> </html>
api/患者/gets_patients.js
const express = require('express'); const mongoose = require('mongoose'); const Patient = require('../model/Patient'); const router = express.Router(); router.route('/') .get((req, res) => { Patient.find({}, (err, patients) => { if (err) { res.status(400).json(err); } res.json(patients); }); }); module.exports = router;
希望这是有道理的，任何帮助将不胜感激。
您未加载 index.html 的主要问题是因为您已注释掉为您的 index.html 提供服务的中间件。
现在您的 index.html 已提供，但无法获取 angular.js 文件，这是因为需要将 node_modules 文件夹设置为静态，以便节点后端为文件提供服务。
你可以这样做：
var path = require('path');//Require the nodeJs's path module.
app.use('/', express.static(path.join(__dirname+'/node_modules')));//declare as static the node_modules folder so that node can serve the angular.js file inside it
编辑 ：
app.use('/', express.static(path.join(__dirname+"/public")));
还以与上述相同的方式提供包含其余文件的 /public 文件夹。
通过 cdn 提供 angular.js 文件或使用 webpack 或 gulp 创建一个 bundle.js。服务 node_modules 将是一个痛苦..
Express.js应用程序在本地可以正常运行，但是在Heroku上部署时无法正常工作
[英]Express.js app works fine locally but doesn't work when deployed on Heroku
Javascript部署到Heroku时未执行，但在本地运行良好
[英]Javascript not executing when deployed to heroku, but works fine locally
Nuxt 3 - OpenAi api - 在本地工作但在部署时不工作（在 Vercel 上）
[英]Nuxt 3 - OpenAi api - Works locally but not when deployed (on Vercel)
我正在尝试使用 Heroku 创建一个不和谐的机器人，当我在本地运行它时它可以工作，但是当我将它部署在 Heroku 上时它不起作用
[英]I'm trying to create a discord bot with Heroku, when I run it locally it works, but it doesn't work when I deploy it on Heroku
Javascript可在本地使用，但在部署到Heroku时将不再可用。 （带有turbo链接。）
[英]Javascript works locally, but no longer works when deployed to Heroku. (With turbo links.)
Node.js https请求在本地工作，但是在部署到heroku时抛出超时
[英]Node.js https request work locally but throws timeout when deployed to heroku
HTML中的Javascript可在本地使用，但不能部署到服务器上
[英]Javascript in HTML works on locally but not when deployed to a server
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.