Angular10开发及Heroku部署出现require未定义、接口403报错

基本运行背景 #

项目基于 Angular 10 开发，集成 OpenWeather、MapBox 两类API，分别在本地开发环境、Heroku 平台完成部署，线上访问地址为 https://wheater-app-amichetti.herokuapp.com/。在修复完此前多类项目报错后，出现两类此前从未遇到过的异常，暂未定位到问题根因，可根据排查需要提供更多项目代码信息，期望梳理出可落地的问题解决思路。

两类核心异常表现 #

全局脚本运行报错 #

浏览器控制台抛出未捕获的引用错误，指向打包生成的全局脚本文件：

Uncaught ReferenceError: require is not defined
at scripts.828ac566223a5fc911a1.js:1

该报错属于前端打包配置类问题，本质是浏览器运行环境不识别 CommonJS 规范下的 require 语法。

天气查询接口请求报错 #

在页面填写国家、城市字段触发天气查询请求时，接口返回 403 禁止访问状态，请求路径为公共CORS代理转发的OpenWeather接口：

GET https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=Rosario,argentina&appid=1a672f6d7425ab40084bb8c4a53d8c53 403 (Forbidden)

该报错属于跨域代理类问题，本质是公共CORS代理的访问规则拦截了请求。

当前Heroku部署服务端配置 #

项目配套的 Node 服务入口文件 server.js 完整代码如下：

const express = require('express');
const path = require('path');

const app = express();

// 仅从 angularapp 目录提供静态资源服务
app.use(express.static(__dirname + '/angularapp'));

app.get('/*', function(req,res) {
  res.sendFile(path.join(__dirname+'/angularapp/index.html'));
});

// 监听 Heroku 分配的默认端口，兜底使用 8080
app.listen(process.env.PORT || 8080);

问题排查与修复方向 #

针对 require is not defined 报错 #

该问题的触发原因是：原本仅能在 Node 环境运行的 CommonJS 模块代码，被错误打包进了前端浏览器加载的 scripts.js 全局脚本文件，导致浏览器环境执行到 require 语句时抛出未定义错误。
可按以下方向逐一排查修复：

• 检查 angular.json 配置中 scripts 字段引入的第三方库，确认是否误引入了仅支持 Node 环境、未做浏览器适配的 CommonJS 模块
• 检查当前引入的第三方依赖版本，替换对应不兼容浏览器环境的 CommonJS 版本为 ESM/UMD 浏览器兼容版本
• 检查打包流程，确认是否将服务端 Node 依赖错误打包到前端静态资源输出目录

针对 OpenWeather 接口 403 报错 #

该问题的触发原因是：当前使用的公共 cors-anywhere 免费实例已启用访问限流机制，仅支持有限的演示请求，超额访问后会直接返回 403 状态，无法作为生产环境的长期代理使用。
可按以下方向逐一排查修复：

• 移除公共 CORS 代理依赖，在现有 Heroku Node 服务端补充接口转发逻辑，由服务端直接向 OpenWeather 发起请求，从根源规避跨域问题
• 同步校验已申请的 OpenWeather API Key 状态，确认是否触发接口调用频率限制

内容的提问来源于stack exchange，提问作者Nestor Amichetti