已阻止加载“http://localhost:8086/xxx.js”的模块,它使用了不允许的 MIME 类型 (“text/plain”)。

记录今天解决的一个小bug

在终端启动8080端口号监听后,打开网址http://localhost:8080,发现不能正确加载页面,打开检查-控制台,出现如下警告:已阻止加载"http://localhost:8086/xxx.js"的模块,它使用了不允许的 MIME 类型 ("text/plain")。

问题的根本原因是静态文件的 MIME 类型错误 。由于使用的是 Python 的 http.server 来提供文件,它默认将 .js 文件的 MIME 类型设为 text/plain,导致浏览器拒绝加载这些文件。

在网上找了一些方法试了没用,借助gpt,发现可以通过手动设置 Python 服务器的 MIME 类型,但是不太推荐。

1.创建如下代码,如a.py

python 复制代码
import http.server
import socketserver
import mimetypes

PORT = 8086
DIRECTORY = "."

class Handler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Cache-Control", "no-store")
        super().end_headers()

    def guess_type(self, path):
        # Ensure .js files are served with the correct MIME type
        if path.endswith(".js"):
            return "application/javascript"
        return super().guess_type(path)

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print(f"Serving at port {PORT}")
    httpd.serve_forever()
  1. 进入a.py的目录,并运行这个脚本

python custom_http_server.py

3。重新打开浏览器,成功加载

相关推荐
下北沢美食家几秒前
WebSocket入门
网络·websocket·网络协议
zh路西法2 分钟前
【rosbridge-websocket】跨网络的ROS1与ROS2通讯法(上)
linux·网络·c++·python·websocket·网络协议
梁辰兴4 分钟前
计算机网络基础:电子邮件的信息格式
网络·计算机网络·电子邮件·计算机网络基础·梁辰兴·信息格式
RXXW_Dor13 分钟前
ModbusTcp通信C#WPF开发测试(基于Nmodbus4库应用)
服务器·网络·tcp/ip
.小小陈.15 分钟前
应用层协议 HTTP 全解析:从基础到实战
网络·网络协议·http
Irissgwe19 分钟前
10、NAT、代理服务、内网穿透
网络·frp·内网穿透·nat·代理服务器·反向代理·正向代理
网络研究院28 分钟前
AI安全格局:前沿模型、智能体AI和AI编码工具如何重塑网络安全与关键基础设施韧性
网络·人工智能·安全·模型·威胁
10WTW0129 分钟前
计网实验 协议分析--ARP协议
网络
酉鬼女又兒29 分钟前
零基础入门计算机网络:点对点协议PPP、媒体接入控制基本概念、静态划分信道技术、CSMA/CD与CSMA/CA协议全面详解
服务器·网络·网络协议·计算机网络·职场和发展·求职招聘·媒体
Shadow(⊙o⊙)37 分钟前
System V共享内存详解,shm系列接口,三种共享内存删除机制。System V通信缺点分析
linux·运维·服务器·开发语言·网络·c++