目前正在开发中,它工作得很好...前端为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 调用中实现此目的?
最佳答案
你们为我指明了正确的方向,但准确地说:
我注意到,在 Angular 中,您会得到一个 environments
文件夹,其中包含两个文件 1. environment.ts
和 environment.prod.ts
。
在部署 yourappname.herokuapp.com
后,我只需确保使用指向 Heroku 为我的应用程序提供的 URL,方法是在我的 environments.prod 中执行以下操作.ts
(这是 Heroku 要寻找的)
export const environment = {
production: true,
apiUrl: "https://yourappname.herokuapp.com/api"
};
在我的 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')
}
}
关于javascript - 在 Heroku 前端部署 Angular/Express 应用程序时出现问题无法访问 API 端点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60999030/