Javascript 在Heroku前端部署Angular/Express应用程序时出现问题无法命中API端点

目前正在开发中，它工作得很好

localhost:4200

用于前端，而

localhost:8080

用于后端

但是，我只是部署了它，显示了前端，但没有从API获取数据，因为在我的

app.service.ts

中，我正在执行以下操作：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://localhost:8080/api'

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(`${this.apiUrl}/countries`)
  }
}

如您所见，我正在硬编码

localhost:8080

，它在开发中运行良好，但在生产中Heroku没有为我分配

端口8080

，而是为我分配了另一个端口

话虽如此。。。我如何调整这个以读取Heroku给我的端口

这是我的app.js文件

const express = require('express');
const app = express();
const scrapper = require('./backend/scrapper')

// Create link to Angular build directory
var distDir = __dirname + "/dist/covid19";
app.use(express.static(distDir));

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    );
    next();
});

app.use("/api/countries", async (req, res, next) => {
    const data = await scrapper.getCountries()
    res.status(200).json(data)
})

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`API listening on port ${port}...`);
});

module.exports = app;

---

如您所见，我将我的端口声明为

process.env.port | | 8080

，但这是用于后端的。。。除了在

service.ts

文件中的API调用之外，如何实现这一点？

当您在Heroku上部署web服务器时，您绑定到

$PORT

Heroku会告诉您绑定到

访问已部署的应用程序时，不指定端口。您只需连接到

yourappname.heroku.com

。DNS会自动将其转换为

ipaddress:port

---

所以在你的前端，你只需指向

yourappname.heroku.com

，而不是

ipaddress:port

你们给我指出了正确的方向，但准确地说：

我注意到在Angular中有一个

environments

文件夹，其中包含两个文件1

environment.ts

和

environment.prod.ts

在部署了

yourappname.herokuapp.com

之后，我必须确保使用指向Heroku为我的应用程序提供的URL，方法是在我的

环境中执行以下操作。prod.ts

（这是Heroku要查找的）

在我的

api.service.ts

中，我得到了以下代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment'

const API_URL = environment.apiUrl;

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(API_URL + '/countries')
  }
}

---

当您在heroku上托管api路由时，它不再是本地主机。您是否将节点js和前端托管在同一个heroku应用程序中？或者你有2个是的，都在同一个Heroku应用程序中（后端和前端）@TomOkay我认为Heroku不支持端口，根据这个stackoverflow:。你有两个选择，一个是查看stackoverflow的答案，另一个是创建两个heroku应用程序，一个是前端

的，另一个是后端
的。在前端，您可以将api url更改为类似
http://my-heroku.herokuapp.com
。搜索如何在Heroku上托管node.js服务器，可以找到大量信息。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment'

const API_URL = environment.apiUrl;

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  public getNews() {
    return this.http.get(API_URL + '/countries')
  }
}