佛系程序员_ GitHub Pages 托管纯前端页面

学习笔记

发布日期: 2025-03-29 17:31:12

喜欢量: 7 个

阅读次数: 72

GitHub Pages（github.io）可以托管纯前端页面，并且可以调用后端接口，只要你的后端部署在支持 CORS（跨域资源共享）的服务器上。

### 实现方式：
1. **托管前端代码**
   - 在 GitHub 仓库的 `main` 或 `gh-pages` 分支下存放 HTML、CSS、JavaScript 文件。
   - 进入 GitHub 仓库的 `Settings > Pages`，选择 `Branch: main`（或 `gh-pages`），然后保存，GitHub 会自动生成 `https://你的用户名.github.io/你的仓库名/` 网址。

2. **调用后端 API**
   - 确保你的后端（Express、ThinkPHP、Egg.js等）允许 CORS 访问，否则浏览器会拦截跨域请求。
   - 在前端代码中使用 `fetch` 或 `axios` 进行 API 请求：
     ```js
     fetch("https://你的后端域名/api/data")
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error("Error:", error));
     ```
   - 如果后端是你自己控制的，可以在服务器端设置 CORS 头部，例如：
     - **Node.js（Express）**
       ```js
       const cors = require('cors');
       app.use(cors());
       ```
     - **PHP**
       ```php
       header("Access-Control-Allow-Origin: *");
       ```

3. **静态路由问题**
   - 如果你使用 Vue Router 的 `history` 模式，GitHub Pages 直接访问非 `/` 路径的页面可能会 404，需要在 `public` 目录下添加 `.htaccess` 或 `404.html` 进行重定向。
   - 解决方案：
     - **Vue 项目**：使用 `hash` 模式 (`mode: 'hash'`)
     - **React 项目**：在 `package.json` 里加 `"homepage": "./"`
     - **手动 404.html 重定向**：
       ```html
       <script>
         window.location.replace("/#"+window.location.pathname);
       </script>
       ```

### 总结：
GitHub Pages 适用于托管前端页面，并可以调用后端 API，但需要确保后端支持 CORS。如果后端不允许跨域访问，可以考虑通过 Cloudflare Workers、Vercel 或 Netlify 进行代理。

yyii

https://amtb.info/show/MTQw

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !