部署在GitHub Pages的React前端无法访问本地localhost后端API的解决求助
2026-4-14
部署在GitHub Pages的React前端无法访问本地localhost后端API的解决求助
我正在尝试把我的React应用部署到GitHub Pages（没有自定义域名），部署本身是成功的，但打开页面后发现前端无法和API通信。查看控制台后，出现了3个错误和1个警告，具体信息如下：
[Warning] [blocked] The page at https://ambaks.github.io/auction-app/ requested insecure content from http://localhost:8000/emails. This content was blocked and must (main.93af0b37.js, line 2) [Error] Not allowed to request resource (anonymous function) (main.93af0b37.js:2:210042) Promise (anonymous function) (main.93af0b37.js:2:208038) St (main.93af0b37.js:2:218033) _request (main.93af0b37.js:2:221077) (anonymous function) (main.93af0b37.js:2:219507) request (main.93af0b37.js:2:219781) (anonymous function) (main.93af0b37.js:2:224798) (anonymous function) (main.93af0b37.js:2:224872) (anonymous function) (main.93af0b37.js:2:224873) Ii (main.93af0b37.js:2:84015) Eu (main.93af0b37.js:2:99867) Su (main.93af0b37.js:2:99751) Eu (main.93af0b37.js:2:100549) Su (main.93af0b37.js:2:99751) Eu (main.93af0b37.js:2:99888) tc (main.93af0b37.js:2:126626) (anonymous function) (main.93af0b37.js:2:124005) T (main.93af0b37.js:2:180662) [Error] XMLHttpRequest cannot load http://localhost:8000/emails due to access control checks. (anonymous function) (main.93af0b37.js:2:210042) Promise (anonymous function) (main.93af0b37.js:2:208038) St (main.93af0b37.js:2:218033) _request (main.93af0b37.js:2:221077) (anonymous function) (main.93af0b37.js:2:219507) request (main.93af0b37.js:2:219781) (anonymous function) (main.93af0b37.js:2:224798) (anonymous function) (main.93af0b37.js:2:224872) (anonymous function) (main.93af0b37.js:2:224873) Ii (main.93af0b37.js:2:84015) Eu (main.93af0b37.js:2:99867) Su (main.93af0b37.js:2:99751) Eu (main.93af0b37.js:2:100549) Su (main.93af0b37.js:2:99751) Eu (main.93af0b37.js:2:99888) tc (main.93af0b37.js:2:126626) (anonymous function) (main.93af0b37.js:2:124005) T (main.93af0b37.js:2:180662) [Error] Error fetching emails: 鈥�Q {stack: "@https://ambaks.github.io/auction-app/static/js/ma鈥/auction-app/static/js/main.93af0b37.js:2:219600", message: "Network Error", name: "AxiosError", 鈥 Q {stack: "@https://ambaks.github.io/auction-app/static/js/ma鈥/auction-app/static/js/main.93af0b37.js:2:219600", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: Object, 鈥Q (anonymous function) (main.93af0b37.js:2:224842)
我试过创建自定义证书，让本地localhost运行HTTPS服务器，但这个方法对我没用。
后端代码
database.py
from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker from sqlalchemy.orm import declarative_base URL_DATABASE = 'sqlite:///./emails.db' engine = create_engine(URL_DATABASE, connect_args={"check_same_thread": False}) SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine) Base = declarative_base()
main.py
''' FastAPI app ''' from database import Base from fastapi import FastAPI, HTTPException, Depends from typing import Annotated, List from sqlalchemy.orm import Session from pydantic import BaseModel from database import SessionLocal, engine import models from fastapi.middleware.cors import CORSMiddleware app = FastAPI() origins = [ '*' ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=['*'], allow_headers=['*'] ) class EmailBase(BaseModel): email: str class EmailModel(EmailBase): id: int class Config: orm_mode=True def get_db(): db = SessionLocal() try: yield db finally: db.close() db_dependency = Annotated[Session, Depends(get_db)] Base.metadata.create_all(bind=engine) @app.post('/emails', response_model=EmailModel) async def create_email(email: EmailBase, db: db_dependency): db_email = models.Email(**email.model_dump()) db.add(db_email) db.commit() db.refresh(db_email) return db_email @app.get('/emails', response_model=List[EmailModel]) async def read_emails(db: db_dependency, skip: int = 0, limit: int = 100): emails = db.query(models.Email).offset(skip).limit(limit).all() return emails
models.py
from database import Base from sqlalchemy import Column, Integer, String class Email(Base): __tablename__ = 'emails' id = Column(Integer, primary_key=True, index=True) email = Column(String)
前端代码
api.js
import axios from 'axios'; const api = axios.create({ baseURL: 'https://localhost:8000' }); // Export axios instance export default api;
app.js
import React, { useState, useEffect } from 'react'; import api from './api'; const App = () => { const [emails, setEmails] = useState([]); const [formData, setFormData] = useState({ email: '' }); useEffect(() => { const fetchEmails = async () => { try { const response = await api.get('/emails'); // Fetch emails setEmails(response.data); } catch (error) { console.error('Error fetching emails:', error); } }; fetchEmails(); }, []); const handleFormSubmit = async (event) => { event.preventDefault(); try { await api.post('/emails', formData); // Submit email setFormData({ email: '' }); const response = await api.get('/emails'); // Refresh email list setEmails(response.data); } catch (error) { console.error('Error submitting email:', error); } }; const handleInputChange = (event) => { setFormData({ email: event.target.value }); }; return ( <div > <nav className="navbar navbar-dark bg-primary"> <div className="container-fluid"> <a className="navbar-brand" href="#"> Naia App </a> </div> </nav> <div className="container mt-4"> <form onSubmit={handleFormSubmit}> <div className="mb-3"> <label htmlFor="emailInput" className="form-label">Email</label> <input type="email" className="form-control" id="emailInput" value={formData.email} onChange={handleInputChange} required /> </div> <button type="submit" className="btn btn-primary">Add Email</button> </form> </div> </div> ); } export default App;
package.json
{ "name": "react-frontend", "homepage": "https://ambaks.github.io/auction-app", "version": "0.1.0", "private": false, "dependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "axios": "^1.7.9", "gh-pages": "^6.2.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.0" }, "scripts": { "start": "react-scripts start", "predeploy": "npm run build", "deploy": "gh-pages -d build", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
index.html
<!doctype html> <html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./auction-app/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><link rel="apple-touch-icon" href="./auction-app/logo192.png"/><link rel="manifest" href="./auction-app/manifest.json"/><title>React App</title><script defer="defer"
备注：内容来源于stack exchange，提问作者Ambaka Le Gregam
