tomcat 无法加载js和css 等静态文件的问题

 

  前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了。jsp等动态页面访问正常。

  打开浏览器监控发现所有的css 和js 文件返回都是404 。直接访问单个的css 文件也同样是404。以为是路径错了,于是一一对了一遍各个文件的路径和服务器上 tomcat路径方面的设置

  发现路径没有问题。在网站更目录创建一个css文件和html文件均不能访问。确认不是网站路径的问题。

  然后怀疑是tomcat 和 Apache 冲突了,或者可能是Apache 的设置不对。因为阿里云是默认的镜像,里面已经装了Apache和tomcat。也没有做什么设置。

  于是直接把Apache 服务停止。但是还是没有用,依然无法访问css 和html 页面。

  然后怀疑是不是服务器js 和css 这两个文件的目录权限有问题,查看了这两个文件夹的权限。没有问题,

  而且在jsp文件能访问的目录,直接创建一个js 文件,同样不能访问。于是权限的怀疑被排除。

  想了半天还是不知道到底是哪配置不对。然后突然想到所有的请求都是nginx 分发的。 是不是nginx 的配置不对。但是一想nginx 配置不对的话,那网站都不能访问啊。为什么jsp 页面能访问而静态文件不行。 带着这个疑问,去查看下nginx的配置,打开nginx conf文件夹中的nginx.conf,果然发现了nginx配置可疑的地方。

  server
  {
    listen 80;
    server_name localhost;
    index index.html index.htm index.jsp;
    root /var/www/web/ROOT;

    location ~ .*.jsp$
    {
      index index.jsp;
      proxy_pass http://localhost:8080;
    }

    locattion *.jsp$ 的意思就是所有jsp的页面均交由tomcat处理。
    root 就是网站的资源存放路径。

    终于清楚了,服务器把所有的请求都是由nginx 转发。nginx 会把 jsp 的请求转给tomcat 来处理,

    至于静态资源的请求 nginx 直接就处理了,直接把资源文件返回给客户端,无需tomcat 处理。

    于是修改root 的设置, 将地址指向实际的网站资源文件的地址。 回到页面重新测试,果然好了。

    刚开始不知道原因,各种测试,各种改代码,服务器相关的设置都改了一遍。知道真相之后,其实要解决非常简单。

 

 

时间: 2024-09-24 15:23:04

tomcat 无法加载js和css 等静态文件的问题的相关文章

javascript-tomcat 外网IP无法加载JS,CSS

问题描述 tomcat 外网IP无法加载JS,CSS 我用http://localhost:8080/HealWebservice/web/viewer.html 或 127.0.0.1 访问是正常的 但用我外网IP192.168.1.XX 访问,就不正常,感觉就好像加载不出来JS,CSS一样. 另192.168.1.213就是我本机的IP 解决方案 f12打开开发工具看下网络选项卡是否有你js,css资源,控制台是否报错 解决方案二: 192.1681.213是局域网啊 配置好服务啊 解决方案

动态加载js、css等文件跨iframe实现

 这篇文章主要介绍了动态加载js.css等文件跨iframe实现的方法,需要的朋友可以参考下 1.动态加载js,css文件(用原生js和jquery)    iframe结构:  frame0(父)  frame2(子)  frame3(子)    frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素?    *同级之间可以调用,可以 通过 子-父-子 的方式调用同级  parent.parentFram("这个方法在调用其他子farme");    1.

web无法加载js,css及图片资源

问题描述 web无法加载js,css及图片资源 如题,写了个项目,用的springMVC+spring+hibernate,当请求到某个网页时,无法加载到js,css及图片资源,但是html可以正常加载,正常手动输入链接是没问题的,servlet-mapping如下 解决方案 SpringMVC要设置静态资源不过滤的配置 <!-- 通过mvc:resources设置静态资源,这样servlet就会处理这些静态资源,而不通过控制器 --> <!-- 设置不过滤内容,比如:css,jquer

动态加载js、css的简单实现代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

动态加载js、css的实例代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

动态加载js、css等文件跨iframe实现_javascript技巧

1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.jquery的append() 复制代码 代码如下: 速度快,同步(需要引入jquery) var oBody = docum

一个简单的动态加载js和css的jquery代码_jquery

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

Nginx设置Js、Css等静态文件的缓存过期时间

location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小时 expires    max; //表示缓存10年 expires    -1; //表示永远过期. 如果设置为-1在js.css等静态文件在没有修改的情况下返回的是http 304,如果修改返回http 200 http 304:自从上次请求后,请求的网页未修改过.服务器返回此响应时,不会返回

js异步动态加载js与css文件代码

 jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 $.getscript("test.js"); 方法2: 代码如下 function loadjs(file){  var head = $('head').remove('#loadscript');  $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type: