Sending files betweeen front-end Angualr app and backend Fast-Api wiont work using HTTPS

When i send files between angular front to the backend i got error on kubernetes Request Method: POST Status Code: 307 Temporary Redirect Referrer Policy: strict-origin-when-cross-origin

Background is that a few month ago I created simple app to organize meetings. App have feature to sent docs, such as files. I used a angular service to send them. So when meeting is created we iterate through files attached uploaded them and receive url for them:

uploadFiles(files: File[], endpoint: string): Observable<FileUploadResponse> {
const formData = new FormData();

for (const file of files) {
formData.append('files', file, file.name);
}

return new Observable<FileUploadResponse>((result) => {
this.http.post(`/api/${endpoint}`, formData)
.subscribe({
next: (response: any) => {
this.popUpService.showPopUp("Successfully uploaded files");
result.next(response);
result.complete();
},
error: (error: Error) => {
console.error("Error when uploading files");
console.log(error)
this.popUpService.showPopUp("Error uploading files");
result.error(false);
result.complete();
}
});
});
}


fast api recive it and return url

@app.post("/upload-files/")
async def createUploadFiles(files: List[UploadFile] = File(...)):
file_urls = []
for file in files:
filename = f"{uuid4()}${file.filename}"
file_path = os.path.join(UPLOAD_DIRECTORY, filename)
with open(file_path, "wb") as newFile:
content = await file.read()
newFile.write(content)
file_urls.append(f"/files/{filename}")
return {"file_urls": file_urls}


So its work on developer build when i use HTTP. I pushed this app into kubernetes kluster, that was a moment when problem starts. So I can create meetings and all posts using jsons work but i can't upload files. I recreate this bug on my local machine running my fast-api server as https:

uvicorn main:app --ssl-keyfile "$SSL_KEYFILE" --ssl-certfile "$SSL_CERTFILE" --ssl-keyfile-password="$SSL_PASSWORD"


now I got this errors locally : POST https://localhost:8000/upload-files/ net::ERR_CERT_AUTHORITY_INVALID

As i said on beginning on my kubernettes i go Mixed Content: The page at 'https://my-adress/new-meeting' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://my-addres/upload-files/'. This request has been blocked; the content must be served over HTTPS.

in network page I got:

Request URL: https://my-adress/api/upload-files Request Method: POST Status Code: 307 Temporary Redirect Referrer Policy: strict-origin-when-cross-origin

So angular can't post at endpoint https..../uplad-files and try to redirect it to http. but backend and front-end are on diff pods so they use https to communicate.

I try to set middleware on fast api to accept all

app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)


but this also didn't help. I think is connected with those certs because i got this kind of error on my local machine but I don't have any idea how to fix it.

I someone got similar problem and have solution, I'll be very grateful if you share your information.

Continue reading...