jsp中引入js、css时出现net::ERR_ABORTED 404 (Not Found)错误

本文解决JS、CSS在项目中加载失败的问题,通过调整路径引用和配置struts2排除静态资源加载,确保前端资源正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

GET http://localhost:8080/static/My/Sub.js net::ERR_ABORTED 404 (Not Found)

出现此问题主要是引入的js、css不起作用。
路径引入

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/My/Sub.js"  charset="utf-8"></script>
</head>

不起作用

(1)改为:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>/static/My/Sub.js"  charset="utf-8"></script>
</head>

问题解决
(2)还有就是strut2拦截了静态资源的加载,修改struts2的struts.xml文件,添加:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.5.dtd">
        
<struts>	    
	<package name="hello" extends="struts-default" >			
					
	</package>
	<constant name="struts.action.excludePattern" value="/static/.*?"></constant>
</struts>
### Vite 打包后出现 `net::ERR_ABORTED 404 (Not Found)` 的解决方案 当使用 Vite 构建项目并部署到服务器,如果遇到资源加载失败的问题(`net::ERR_ABORTED 404 (Not Found)`),通常是因为静态文件路径配置不正确或构建后的目录结构未被正确解析。以下是可能的原因及对应的解决方法: #### 1. **检查 `base` 配置** Vite 提供了一个名为 `base` 的选项用于指定生产环境下的基础路径。默认情况下,该值为空字符串 (`''`) 表示根路径 `/`。如果将项目部署在一个子路径下,则需要修改此配置。 在 `vite.config.js` 中设置合适的 `base` 值[^5]: ```javascript export default { base: '/your-sub-path/', // 如果部署在根路径则设为 '/' } ``` #### 2. **确认 HTML 文件中的资源路径** 构建完成后,HTML 文件会引用一些静态资源(如 CSS 和 JavaScript)。这些路径可能是相对路径或者绝对路径。如果路径错误,浏览器无法找到对应文件从而抛出 404 错误。 确保生成的 HTML 文件中 `<link>` 或 `<script>` 标签指向正确的 URL 地址。可以通过调整上述提到的 `base` 参数来控制最终生成的路径[^4]。 #### 3. **验证 Web Server 配置** 即使前端代码已正确处理了资源定位问题,但如果服务端没有适当地支持 SPA(单页应用)路由模式,也可能导致某些页面返回 404 错误。对于这种情况,在 Nginx/Apache 等 web server 上需做额外配置让所有未知请求重定向回 index.html 页面[^1]: Nginx 示例配置如下: ```nginx location / { try_files $uri /index.html; } ``` #### 4. **第三方库引入方式** 有开发者会在开发阶段直接通过 script 标签从 node_modules 引入依赖项,这种方式仅适用于本地调试并不适合正式发布版本。应该借助 bundler 将所需模块打包进最终产物里而不是尝试远程获取它们[^3]. 例如原本这样写法可能会引发跨域等问题以及找不到文件的情况: ```html <script src="/node_modules/some-library/index.js"></script> ``` 改为安装相应插件并通过 import 使用即可解决问题. --- ### 总结 针对 Vite 打包后产生的 `net::ERR_ABORTED 404 (Not Found)` 报错现象,主要可以从以下几个方面入手排查和修复:一是合理设定 vite config 中的基础路径参数;二是仔细核验产出物里的 html 是否存在不当链接地址;三是优化后端服务器规则使其兼容 spa 应用特性最后再审视是否有外部脚本加载异常状况发生。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值