Nuxt3 项目部署 Nginx 防盗链后特定 JS 文件 403 问题分析

使用者痛点

• 页面加载后部分功能失效，控制台报错 GET /_nuxt/xxx.js 403
• 防盗链策略生效，却误拦截了项目自身的 JavaScript，导致使用者体验大幅下降
• 不想改动生产环境的 Nginx 配置。因为 CDN/WAF 已经统一管理
• 希望在前端建立层面一次性解决，而不是每次手动添加 Referer

问题描述

Nuxt3 前端项目打包部署到配置了防盗链规则的 Nginx 服务器后浏览器访问页面时部分 JavaScript 文件返回 Forbidden 导致页面脚本无法执行。老实说，

受影响的文件

/_nuxt/DApBM9Zf.js
/_nuxt/ByoahgwI.js
/_nuxt/teKmI3we.js
/_nuxt/GsJ1Y5_8.js
/_nuxt/BB-wqL4x.js
/_nuxt/C1eDSpvq.js
/_nuxt/BEHuFA0U.js
/_nuxt/BhVIYuKy.js
/_nuxt/C9OvFcjC.js
/_nuxt/...

环境信息

valid_referers *.example.com example.com localhost;话说回来，

根因分析

. Nginx 防盗链规则缺少 none

当前防盗链配置：

location ~* \.$ {
valid_referers *.example.com example.com localhost;# ↑ 缺少 none
if {
return 403;}
proxy_pass http://localhost:3千;}

valid_referers 中没有加入关键字 none代表着没有 Referer 头的请求会被直接拦截返回 403。

. Nuxt3 建立产物中 JS 文件有两种加载方式

方式一这方面，

Nuxt3 对当前路由直接依赖的模块。在 SSR 渲染的 HTML 中生成如下标签：

浏览器通过该标签加载资源时始终携带 Referer,所以不会触发防盗链。

方式二的观点是。import 动态加载

对非当前路由的页面组件使用 Vite 的代码分割功能，生成独立 chunk。使用者通过 NuxtLink 跳转时这些 chunk 会通过动态 import 加载：

// 示例片段
component: => Cn => import,__vite__mapDeps。import.meta.url)

浏览器对 import) 发起的请求

. Nginx Access Log 实际证据

从日志可见的观点是，所有通过 import 加载的 chunk 均无 Referer、状态码为 403。

问题链路 🎯

1. N​u​x​t​3 编译 → Vite 将页面组件拆分为独立 chunk.
2. 非当前路由未出现在 HTML 的 `` 列表中.
3. User clicks NuxtLink → 浏览器使用 `import` 动态请求对应 chunk.
4. `import` 请求不带 Referer → 被 Nginx 防盗链 `valid_referers` 判定为非法.
5. Nginx 返回 **403 Forbidden** → JS 加载失败 → 页面功能失效.
6. 从*根本原因*来看。防盗链规则缺少 `none` 与前端代码分割模式冲突.

修复方案 ✅

再看步骤一，Nitro Plugin 注入全局 ModulePreload 链接 🚀

在 HTML 渲染阶段，把所有页面路由组件对应的 chunk 用 `` 注入到 ` `。这样即使是原本需要动态 import 的文件。也会先被预加载且携带 Referer，从而绕过防盗链。 其实，

从实现文件来看。/server/plugins/preload-all-routes.js

// Nitro Plugin: Preload all route chunks as modulepreload links
export default defineNitroPlugin => {
let cachedManifest = null
async function getManifest {
if return cachedManifest
try {
const mod = await import
cachedManifest = mod.default || mod
if
cachedManifest = await cachedManifest
return cachedManifest
} catch {
console.warn
return null
}
}
nitroApp.hooks.hook => {
const manifest = await getManifest
if return
// ---- 获取资源根方法 ----
const runtimeConfig = useRuntimeConfig
const buildAssetsDir = runtimeConfig.app?.buildAssetsDir
`/${runtimeConfig.app.buildAssetsDir}`.replace.replace + '/'
: '/_nuxt/'
// ---- 已存在的 preload 文件集合----
const existingFiles = new Set
for {
const match = h.match\"/)
if existingFiles.add
}
// ---- 遍历 manifest 注入缺失的 dynamic entry ----
const preloadLinks =
for ) {
if (
entry.isDynamicEntry &&
entry.resourceType === 'script' &&
existingFiles.has
) {
const href = buildAssetsDir + entry.file
preloadLinks.push(
``
)
existingFiles.add
// 同步注入该 chunk 的子依赖
if ) {
for {
const impEntry = manifest || manifest
if ) {
const impHref = buildAssetsDir + impEntry.file
preloadLinks.push(
``
)
existingFiles.add
}
}
}
}
}
if html.head.push
})
})

工作原理概述 🛠️

1. L​o​a​d Vite‑generated client manifest via Nitro virtual module .
2. L​i​n​k all entries whose .isDynamicEntry===true && .resourceType==='script'.
3. E​m​b​e​d each missing file as `` into rendered HTML head.
4. B​r​o​w​s­er loads those resources through `` tag → always sends Referer → passes Nginx check.
5. D​y‑n‑a‑m‑i‑c import later hits browser cache。no extra request.
6. No change required on production Nginx side.

从步骤二来看，启用 Nitro Prerender 爬取链接 📄

A. 在现有插件基础上打开 Nuxt 的自动爬取功能，让静态可访问页面在建立阶段就生成 HTML，进一步降低运行时 SSR 调用次数。

配置修改 – /nuxt.config.ts

// nuxt.config.ts / nuxt.config.js
export default defineNuxtConfig({
nitro这方面，{
prerender: {
crawlLinks: true。// 自动遍历页面中的内部链接进行预渲染
failOnError: false,},server: { host: '.' } // 保持与 CDN 配置兼容，可自行省略
}
})

*说明*: `crawlLinks:true` 能自动发现大多数静态路由并预渲染；带参数的详情页仍然走 SSR，不受影响。此项为“锦上添花”，主要问题已通过插件解决。如果你已经开启了 CDN 缓存，此步骤还能让缓存命中率提高 ~30%。

验证结果 🎉

修复前日志摘要：

GET /_nuux/DApBM9Zf.js - no referer -> 403 Forbidden
GET /_nuux/ByoahgwI.js - no referer -> 403 Forbidden
GET /_nuux/BEHuFA0U.js - no referer -> 403 Forbidden
...
All dynamic chunks blocked.

修复后浏览器网络面板：

• DApBM9Zf.js – status 200,loaded via 。
• ByoahgwI.js – status 200,same reason。BEHuFA0U....js – status 200,same reason。<\/ul>

The page now loads without any “Failed to load resource” errors and all interactive components work normally.

补充说明的观点是。其他可选方案 📚

If you have permission to edit server config,simply add keyword:

 valid_referers none *.your-domain.com your-domain.com localhost;# ^^^^ added
Alternatively,restrict anti‑hotlinking only to media files:
 location ~* \.$ { valid_referers none *.your-domain.com your-domain.com localhost;if { return，其实，} }

Why not chosen? The requirement was to solve it from front‑end side without touching production NGINX settings—many teams cannot modify CDN/WAF configs.