Wie kann ich meinem React-Frontend, das auf GitHub-Seiten bereitgestellt wird, erlauben, auf die Localhost-Backend-API z ⇐ Python

[Anonymous]

Ich versuche, meine React-App ohne benutzerdefinierte URL auf GitHub-Seiten bereitzustellen. Fast alles funktioniert gut und die Seite wurde erfolgreich bereitgestellt. Wenn ich jedoch die Webadresse aufrufe, scheint es, dass die Seite nicht mit der API kommuniziert. Nach Überprüfung der Konsole werden diese 3 Fehler und 1 Warnung angezeigt:

Code: Select all

[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…o/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…o/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)

Ich habe versucht, ein benutzerdefiniertes Zertifikat zu erstellen und meinen Localhost auf dem Server auszuführen, wie unter diesem Link beschrieben, aber es hat bei mir nicht funktioniert.
Hier ist mein Backend-Code:

Code: Select all

database.py

:

Code: Select all

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()

Code: Select all

main.py

:

Code: Select all

'''
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:

Code: Select all

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)

Und hier ist der Code für mein React-Frontend:

Code: Select all

api.js

:

Code: Select all

import axios from 'axios';

const api = axios.create({
baseURL: 'https://localhost:8000'
});

// Export axios instance
export default api;

Code: Select all

app.js

:

Code: Select all

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 (



[url=#]
Naia App
[/url]





Email


Add Email



);
}

export default App;

So sieht meine package.json aus:

Code: Select all

{
"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"
]
}
}

Und das ist meine index.html:

Code: Select all

React AppYou need to enable JavaScript to run this app.