EJS无法渲染HTML页面、CORS跨域报错及EJS扩展名设置问题咨询

一、CORS报错与EJS页面无法渲染问题 #

报错原文 #

"从源 'http://localhost:3000' 向 'https://o189131.ingest.sentry.io/api/5478725/envelope/?sentry_key=504fcb6b9eee411d8157d41c0adb1170&sentry_version=7' 发起的fetch请求已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。如果不需要获取响应的具体内容，可将请求的mode设置为'no-cors'以禁用CORS来获取资源。"

原因与解决 #

1. CORS报错本身和EJS渲染无直接关联，是前端页面集成的Sentry错误监控的上报请求被跨域策略拦截，不会直接导致页面渲染失败
2. 本地开发阶段可以通过两种方式消除该报错：
   • 给Sentry上报的fetch请求添加mode: 'no-cors'配置
   • 本地开发环境临时关闭Sentry上报逻辑
3. EJS页面无法渲染的排查点：
   • 确认已安装ejs依赖，执行npm i ejs完成安装
   • 确认项目根目录下存在views文件夹，且home.ejs存放在该文件夹内（Express默认会从views目录读取模板文件）

二、EJS模板扩展名改为.html的配置方法 #

你当前只配置了view engine为ejs，Express默认只会识别.ejs后缀的模板文件，需要修改配置同时调整编辑器关联：

1. 修改Express模板引擎配置，替换原有app.set('view engine', 'ejs')为如下代码：

// 注册.html后缀文件使用ejs渲染引擎解析
app.engine('html', require('ejs').renderFile);
// 设置默认视图后缀为html
app.set('view engine', 'html');

修改后将home.ejs重命名为home.html存放在views目录即可正常调用res.render('home')渲染
2. 配置Visual Studio语法识别：
打开VS设置，搜索「文件关联」，添加关联规则：*.html对应值为ejs，即可让VS识别.html后缀文件为EJS语法，提供对应的高亮、补全支持。如果仅需要单独适配home.html，也可以单独配置规则键为home.html。

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