程序员经验分享-hwhale

前端无法渲染CSS文件

2023-05-16

🚀 优质资源分享 🚀

学习路线指引（点击解锁）知识定位人群定位
🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

问题描述：

启动前端后，发现前端的页面渲染不符合预期，看情况应该是css文件没有生效。

Image.png

排查步骤：

  1. 查看有无报错信息。
    查看后台输出，没有可用的提示信息，如图：
    Image.png
  2. 确认 css 的路径没错。
    前端打包后的文件目录如下：
    Image.png
    html 中的 css 路径如下：
    Image.png
    文件路径符合。
  3. 确认前端有请求到css。
    再查看前端发送的请求，确实有请求css，但是 response 的Content-Type是text/plain。
    Image.png
    Image.png

排查到这里，基本就确定了原因——浏览器只会渲染Content-Type为text/css的css文件。

Image.png

解决方法：

在 Nginx 配置文件中添加这两行代码即可。

# 引入MIME配置文件
include  /etc/nginx/mime.types;
# 指定默认的文件类型为 application/octet-stream
default_type  application/octet-stream;

Web服务器在收到静态资源的文件请求时，会进行以下操作：

  1. 识别文件的后缀名；
  2. 在服务器的MIME配置文件中找到对应的 MIME Type；
  3. 根据 MIME Type 设置 response 的Content-Type。

因此，在使用Nginx作为代理服务器时，需要在nginx.conf 引入MIME配置文件。

参考资料：

Nginx(十八)mime.types的作用_wzj_110的博客

MIME 类型 - HTTP | MDN

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端无法渲染CSS文件 的相关文章

  • IPv6网络编程注意[from IPv4]随笔

    C语言IPv6网络编程注意 from IPv4 随笔 在选择address family时 xff08 如socket inet ntop 第一个参数 xff0c sockaddr in6 sin6 family xff09 使用AF IN

  • VMware虚拟机NAT无法联网的几大原因

    1 宿主机电脑网络链接 适配器中 xff0c VMnet8网卡可能未启用 xff0c 请禁用后再启用 2 右键我的虚拟机 gt 设置 gt 网络适配器 xff0c 选择NAT或者自定义 gt VMnet8 3 VMware gt 编辑 gt

  • SELinux学习总结 (Ubuntu)

    SELinux学习总结 目录 一 介绍1 简介2 作用3 架构 https blog csdn net MyArrow article details 10063581 二 英文缩写三 SELinux元素介绍1 主体 Subject 2 客

  • Linux PAM 可插入验证模块

    这两篇足够了 xff0c 记录一下 xff1a pam模块的配置使用 Linux下PAM模块学习总结

  • 微信公众号文章跳转网页携带参数

    微信公众号文章跳转网页时 xff0c 请求头中携带了微信文章链接 xff0c 我们把需要传递的参数放在微信文章链接中就可以了 2020年12月10日11 35 23更新 微信方面做出限制 xff0c 已经获取不到Header xff1a R

  • 深入Linux C/C++ Timer定时器的实现核心原理

    时间与定时 定时器的实现原理Linux上的定时函数获取当前系统时间定时器的设计最小堆实现时间轮实现 要不要用Timerfd xff1f 每个超时事件独享一个timerfd所有超时事件共享一个timerfd 总结 我曾以为像定时器这样基础的功

  • 深入linux下文件系统磁盘Disk,分区Partition,挂载Mount

    目录 Linux 分区简介挂载点目录简介实战分区挂载临时挂载永久挂载 xff1a 开机自动挂载添加硬盘 amp 分区 amp 挂载loop device 回环设备loop mount绑定式挂载 bind mount 重新挂载 remount

  • 高效工具-局域网服务器访问公网

    文章目录 任务需求方法1 xff1a 使用CCproxy代理简单介绍下载安装配置逻辑本机配置客户机配置 成功测试 方法2 修改MAC地址查询本机MAC地址修改内网服务器MAC地址打开rc local service服务添加Install段创

  • 百万C++程序员的启蒙书，畅销20余年，这部经典终于出配套习题解答了！

    在编程的世界里 xff0c 很多语言来了又走 xff0c 而C 43 43 却屹立了30年 xff0c 并在21世纪仍保持强劲势头 去年 xff0c C 43 43 之父Bjarne Stroustrup公布了C 43 43 20添加的新特

  • 【无标题】

    1 MLT开源框架 MLT是为视频编辑而设计的LGPL多媒体框架 本文档为MLT的最小配置 构建和安装提供了快速参考 有关用法详细信息 xff0c 请参阅docs 目录 有关开发细节和贡献指南 xff0c 请参见网站 2 配置 通过运行以下

  • IDEA新建project步骤，项目组成和解释

    完成之后如图所示 xff1a 新建完成后会有2个文件 xff0c 一个是新建的文件夹其下包括 idea和src源码文件 xff0c 另一个是external libraries xff0c 其中存储的是一个可能用到的jar包 xff0c 如

  • ssm单元测试(junit)简单使用

    测试 软件测试 单元测试 xff1a 对你每个函数单元进行测试 xff0c 保证每个模块正常工作集成测试 xff1a 对已经测试过的功能模块进行组装后的测试系统测试 xff1a 检验软件产品能否与系统的其他部分协调工作验收测试 xff1a

  • ubuntu18图形界面设置开机自启动踩坑

    解决ubuntu18开机自启动问题 xff08 2 xff09 自己写一个shell脚本 将写好的脚本 xff08 sh文件 xff09 放到目录 etc profile d 下 xff0c 系统启动后就会自动执行该目录下的所有shell脚

  • idea本地编译报错 程序包org.slf4j不存在；程序包javax.servlet.http不存在；Error:(13, 2) java: 找不到符号；

    一 问题详细 最近换了一台新电脑 再打开之前的旧项目是报下面的错误 但是项目可以正常打包编译 但是就不能本地运行 idea中通过maven已经导入了包 xff0c idea中也能定位到包的位置 xff0c 本地maven仓库也有对应的jar

  • 构建Spring项目的一些配置文件

    pom xml基础配置 lt dependencies gt lt https mvnrepository com artifact log4j log4j gt lt dependency gt lt groupId gt log4j l

  • Api Generator Plus & Copy as curl 自动上传YApi接口

    Api Generator Plus 插件能够一键自动上传YApi接口 xff1b 一键生成 curl 命令 fetch方法 axios方法 快速开始 1 打开插件管理 xff0c 搜索api generator plus xff0c 安装

  • centos6升级到7.2-----2023年

    CentOS 6 升级到 CentOS 7 准确的说 xff0c 是从 CentOS 6 5 先升级到 CentOS 7 2 只有 6 5 以上版本才能这么升级 xff0c 而且最高只能升级到 7 2 现在的问题是官网已经不再维护 Cent

  • 怎么在IDEA中配置power shell

    第一步 xff1a 接下来 xff0c 在步骤3那里找到黄色方框里面的powershell exe文件 在点击OK之后 xff0c 你就能看到以下 说明 xff0c 已经配置成功了

  • 【数据结构】——二叉树的创建详解

    之前有篇文章概要的叙述了一下关于二叉树的创建 xff0c 参考博文二叉树的c语言创建但是很不全面 xff0c 这篇文章就让我们来好好探讨一下关于二叉树的创建吧 首先 xff0c 我们要做一些前期准备 xff0c 有关于本课二叉树的结点信息和

  • Fortify--安装与使用

    Fortify是Micro Focus旗下AST xff08 应用程序安全测试 xff09 产品 xff0c 其产品组合包括 xff1a Fortify Static Code Analyzer提供静态代码分析器 xff08 SAST xf

随机推荐

  • [web安全]burpsuite抓取微信公众号、小程序数据包

    最近在接触微信公众号和微信小程序的渗透 xff0c 用过模拟器 xff0c 也直接在手机上设置代理 xff0c 都遇到各种问题 xff0c 用起来很不舒心 记录遇到的一些问题 xff0c 帮助和我一样踩过坑的 xff0c 亲测好用 IE浏览

  • 安全-开源项目安全检查规范

    有些公司为了提高在IT圈的技术知名度 xff0c 增加行业影响力 xff0c 一些技术会定期将非核心业务源代码以公司级名义上传到源码开源平台 xff0c 如GitHub 特此输出相关的安全检查规范 第一条 开源的代码项目可以为通用的解决方案

  • 安全-系统上线安全检查规范

    现在各个公司都开始重视安全 xff0c 不仅仅是因为国家开始重视安全 xff0c 而是安全漏洞一旦暴露 xff0c 被有心之人发现进行破坏 xff0c 损失将无法估量 xff1b 比如 xff1a 前端时间拼多多优惠券事件 安全测试是一项比

  • 应用安全测试技术DAST、SAST、IAST对比分析-持续更新

    应用安全测试技术DAST SAST IAST对比分析 持续更新 版权来源 xff1a 安全牛首发文章 xff0c 本文仅补充完善 一 全球面临软件安全危机 我们即将处于一个软件定义一切的时代 xff0c 这是 一个最好的时代 xff0c 也

  • Python中函数和方法的区别

    简单总结 xff1a 与类和实例无绑定关系的function都属于函数 xff08 function xff09 xff1b 与类和实例有绑定关系的function都属于方法 xff08 method xff09 首先摒弃错误认知 并不是类

  • 九宫格,二十五宫格,甚至八十一宫格 技巧

    九宫格 二十五宫格 甚至八十一宫格 只要是奇数的平方宫格者能做到横格相加 坚格相加 斜格相加得数相同 而偶数的宫格只有十六宫格有些规律 下面是三宫格 五宫格 七宫格 九宫格图 填写技巧 第一行中间填1 xff0c 右上没有的 xff0c 就

  • python 编写输出到csv

    def test write self fields 61 fields append orderCode with open r 39 test001 csv 39 39 a 39 newline 61 34 34 as f writer

  • Vagrant 共享目录出现 mount：unknown filesystem type ‘vboxsf‘

    环境 xff1a Windows 10 VirtualBox 7 0 6 Vagrant 2 3 4 错误如下 xff1a 61 61 gt default Attempting graceful shutdown of VM 61 61

  • 利用python进行企业微信机器人自动发送消息

    def test 004 robot self headers 61 34 Content Type 34 34 text plain 34 s 61 34 卖品 xff0c 打印码 xff1a 验证码 34 format str prin

  • js修改页面hidden属性

    想获取这个value的值 xff0c 但是看其是个input标签 xff0c 他的type属性是hidden 也就是只能定位 xff0c 不能对其操作 xff0c 想要通过元素的 get attribute 34 value 34 是不可能

  • mybatis的多表查询（一对一，一对多，多对多）

    mybatis多表查询 表之间的关系有几种 xff1a 一对多 多对一 一对一 多对多 举例 xff1a 用户和订单就是一对多 订单和用户就是多对一 一个用户可以下多个订单 多个订单属于同一个用户 人和身份证号就是一对一 一个人只能有一个身

  • 8款纯CSS3搜索框

    效果如下 xff1a 代码实现如下 xff1a span class token doctype lt DOCTYPE html gt span span class token tag span class token tag span

  • ViewBinding和DataBinding的理解和区别

    之前一直把ViewBinding当成了DataBinding xff0c 直到最近的学习中才发现他们不是一个东西 于是写下这篇笔记帮助理解和区分他们俩 一 ViewBinding 1 什么是ViewBinding 先来看看官方是怎么说的 通

  • Android KeyStore的使用

    在我们App开发过程中 xff0c 可能会涉及到一些敏感和安全数据需要加密的情况 xff0c 比如登录token的存储 我们往往会使用一些加密算法将这些敏感数据加密之后再保存起来 xff0c 需要取出来的时候再进行解密 此时就会有一个问题

  • 2流高手速成记（之四）：SpringBoot整合redis及mongodb

    x1f680 优质资源分享 x1f680 学习路线指引 xff08 点击解锁 xff09 知识定位人群定位 x1f9e1 Python实战微信订餐小程序 x1f9e1 进阶级本课程是python flask 43 微信小程序的完美结合 xf

  • RabbitMQ延迟消息指南【.NET6+EasyNetQ】

    x1f680 优质资源分享 x1f680 学习路线指引 xff08 点击解锁 xff09 知识定位人群定位 x1f9e1 Python实战微信订餐小程序 x1f9e1 进阶级本课程是python flask 43 微信小程序的完美结合 xf

  • sql语法巧用之not取反

    x1f680 优质资源分享 x1f680 学习路线指引 xff08 点击解锁 xff09 知识定位人群定位 x1f9e1 Python实战微信订餐小程序 x1f9e1 进阶级本课程是python flask 43 微信小程序的完美结合 xf

  • 如何实现一个SQL解析器

    x1f680 优质资源分享 x1f680 学习路线指引 xff08 点击解锁 xff09 知识定位人群定位 x1f9e1 Python实战微信订餐小程序 x1f9e1 进阶级本课程是python flask 43 微信小程序的完美结合 xf

  • 方便快捷的在 CentOS 7 中安装 Nginx

    介绍 Nginx 是一种流行的高性能 Web 服务器 本教程将教您如何在 CentOS 7 服务器上安装和启动 Nginx 先决条件 本教程中的步骤需要具有特权的root用户 第 1 步 添加 EPEL 软件仓库 要添加 CentOS 7

  • 前端无法渲染CSS文件

    x1f680 优质资源分享 x1f680 学习路线指引 xff08 点击解锁 xff09 知识定位人群定位 x1f9e1 Python实战微信订餐小程序 x1f9e1 进阶级本课程是python flask 43 微信小程序的完美结合 xf

热门标签