Arduino MKR WiFi 1010 AP模式下Bootstrap无法加载问题求助

嗨，我明白你遇到的问题了——在AP模式下加载HTML页面时Bootstrap没生效，只显示基础样式。这背后的核心原因很简单：当设备连接到你的MKR WiFi 1010创建的AP时，它并没有外网访问权限，所以浏览器根本无法从CDN（比如maxcdn.bootstrapcdn.com）下载Bootstrap的CSS文件，自然就没法渲染出预期的样式。

下面是两种可行的修复方案，你可以根据自己的需求选择：

方案一：将Bootstrap CSS本地存储到SD卡并修改服务器代码 #

这个方案适合需要复用静态资源的场景，步骤如下：

1. 下载Bootstrap CSS文件
   获取你使用的4.4.1版本的Bootstrap CSS文件，保存为bootstrap.min.css。

2. 将文件放到SD卡指定目录
   把bootstrap.min.css和你的index.htm一起放到SD卡的SERVER文件夹里。

3. 修改index.htm中的引用路径
   把原来的CDN引用改成本地路径：

   <!-- 替换原来的CDN链接 -->
   <link rel="stylesheet" href="/SERVER/bootstrap.min.css">
   

4. 修改Arduino代码，处理静态资源请求
   现在你的服务器只处理了根路径的请求，需要添加逻辑来响应CSS等静态文件的请求。更新loop函数里的请求处理部分：

   void loop() {
     WiFiClient client = server.available();
     if (client) {
       Serial.println("新客户端连接");
       String currentLine = "";
       String requestPath = ""; // 新增：存储请求的路径
   
       while (client.connected()) {
         if (client.available()) {
           char c = client.read();
           Serial.write(c);
   
           if (c == '\n') {
             if (currentLine.length() == 0) {
               // 解析请求路径
               if (requestPath.startsWith("GET /")) {
                 // 提取请求的文件路径
                 String filePath = requestPath.substring(4);
                 // 如果是根路径，默认返回index.htm
                 if (filePath == "/" || filePath.isEmpty()) {
                   filePath = WEBHTM;
                 } else {
                   // 拼接完整路径（确保文件在SERVER目录下）
                   filePath = "SERVER/" + filePath;
                 }
   
                 // 检查文件是否存在
                 if (SD.exists(filePath)) {
                   client.println("HTTP/1.1 200 OK");
                   // 根据文件后缀设置Content-Type
                   if (filePath.endsWith(".css")) {
                     client.println("Content-type:text/css");
                   } else if (filePath.endsWith(".htm")) {
                     client.println("Content-type:text/html");
                   }
                   client.println();
   
                   // 发送文件内容
                   File webFile = SD.open(filePath);
                   if (webFile) {
                     while (webFile.available()) {
                       client.write(webFile.read());
                     }
                     webFile.close();
                   }
                 } else {
                   // 文件不存在，返回404
                   client.println("HTTP/1.1 404 Not Found");
                   client.println("Content-type:text/plain");
                   client.println();
                   client.println("File not found");
                 }
                 client.println();
                 break;
               } else if (currentLine.endsWith("POST /enterCredentials")) {
                 // 保留你的POST处理逻辑
               }
             } else {
               // 提取请求行（比如GET /SERVER/bootstrap.min.css HTTP/1.1）
               if (currentLine.startsWith("GET")) {
                 requestPath = currentLine;
               }
               currentLine = "";
             }
           } else if (c != '\r') {
             currentLine += c;
           }
         }
       }
       client.stop();
       Serial.println("客户端已断开连接");
     }
   }
   

方案二：将Bootstrap CSS内嵌到HTML文件中 #

如果不想额外管理静态文件，这个方案更简单：直接把Bootstrap CSS的内容复制到你的index.htm的<style>标签里。

1. 打开Bootstrap CSS文件
   用文本编辑器打开下载好的bootstrap.min.css，复制全部内容。

2. 修改index.htm
   把原来的CDN链接替换成内嵌的<style>标签，把复制的CSS内容粘贴进去：

   <head>
     <title>LPS Server</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 替换CDN链接为内嵌样式 -->
     <style>
       /* 这里粘贴bootstrap.min.css的全部内容 */
     </style>
   </head>
   

这样修改后，浏览器加载HTML时就能直接获取到Bootstrap的样式，不需要再请求外部资源，自然就能正常显示样式了。

你可以根据自己的情况选择其中一种方案，测试一下应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者Dorokun192