本文介绍一种基于 HTTP Accept 请求头的可靠方法，用于在服务端精准识别 .js 文件的访问场景：是被 标签引入、ES 模块动态导入，还是用户直接在浏览器地址栏打开以查看源码，从而支持语法高亮、HTML 渲染等差异化响应。

本文介绍一种基于 http accept 请求头的可靠方法，用于在服务端精准识别 .js 文件的访问场景：是被 <script> 标签引入、es 模块动态导入，还是用户直接在浏览器地址栏打开以查看源码，从而支持语法高亮、html 渲染等差异化响应。</script>

在构建现代前端开发工具链（如本地静态服务、代码预览服务或增强型 Service Worker）时，一个常见需求是：当用户双击打开一个 .js 文件（例如通过 file:// 协议或本地服务器路径 http://localhost:3000/script.js），希望自动为其生成带语法高亮的 HTML 页面；而当该文件被正常引入（如 <script src="script.js"></script> 或 import './script.js'）时，则应原样返回纯 JavaScript 内容，不作任何 HTML 封装。

关键在于——浏览器在不同加载方式下会发送语义明确的 Accept 请求头，这是最稳定、无需客户端 JS 干预、且兼容所有现代浏览器的服务端判别依据：

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

• ✅ 作为脚本加载（<script> / import / fetch()）：<br />Accept: */*<br /> （浏览器明确表示可接受任意类型，不偏好 HTML）</script>

• ✅ 在新标签页中直接打开（即“查看源码”行为）：
  Accept: text/html,application/xhtml+xml,...
  （浏览器明确声明优先接受 text/html，这是渲染页面的前提信号）

因此，服务端只需检查请求头中 Accept 是否包含 text/html 子串即可准确判断：

// Node.js + Express 示例
app.get('/scripts/:filename.js', (req, res) => {
  const isViewedAsPage = req.headers.accept?.includes('text/html');

  if (isViewedAsPage) {
    // 读取原始 JS 内容，用 highlight.js 或 Prism 渲染为 HTML
    const jsContent = fs.readFileSync(`./scripts/${req.params.filename}.js`, 'utf8');
    const highlightedHtml = highlightJs.highlight(jsContent, { language: 'javascript' }).value;

    res.send(`
      <!DOCTYPE html>
      <html><head><title>${req.params.filename}.js</title>
        <style>pre { padding: 1rem; background: #f5f5f5; }</style>
      </head>
      <body><pre class="brush:php;toolbar:false;"><code>${highlightedHtml}</code>