API Response does not come through to the frontend (Angular) (Fast API) (EC2)

I am pretty new to fast API and angular. I am getting an issue where in angular the response never fully gets sent. When I use postman or curl the response is fully there but for some reason it always stalls on angular. I have tried switching between fetch and httpClient as well as sending data in chunks and regularly but nothing works. The closest I have gotten is using fetch and sending the data in chunks. At the heart of it I think the problem is the content length. I would get a net::ERR_CONTENT_LENGTH_MISMATCH in Angular and the amount sent was never matching:

15.7 kB / 434 kB transferred
15.4 kB / 7.8 MB resources
Finish: 3.4 min


I added timeout_keep_alive but that just makes it take more time to stall out. The error I get with this version is (failed)net::ERR_INCOMPLETE_CHUNKED_ENCODING

def run_api():
uvicorn.run(
app,
host="-----",
port=---,
timeout_keep_alive=200)


I have made a few post calls that have worked but this get call is not working at all. The one thing that might be weird is that the backend (api) is in an ec2 instance and I ma calling from my local machine using http, but again it works for a different post call.

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


Call From Angular

public getAttachmentMetadata(): Observable<any> {
return new Observable(observer => {
const token = this.cookieService.get('session_token');
console.log("Retrieved token:", token);

const url = token ? `${this.API_URL}?token=${encodeURIComponent(token)}` : this.API_URL;

fetch(url, {
method: 'GET',
credentials: 'include',
headers: { 'Accept': 'application/json' }
})
.then(response => {
console.log("Response Status:", response.status);
console.log("Response Headers:", response.headers);



return response;
})
.catch(error => {
console.error("Error fetching metadata:", error);
observer.error(error);
});
});
}


Router in API

attachments_router = APIRouter(prefix="/attachments", tags=["attachments"])

@attachments_router.get("/get/metadata")
async def get_attachments():
data = get_attachments_tables()
# return data #THIS IS THE WAY WITHOUT SENDING IN CHUNKS
return StreamingResponse(stream_json_response(data), media_type="application/json")

async def stream_json_response(data):
""" Streams a JSON response while ensuring full nested data transfer. """
yield '{"success": true, "message": "Success", "data": {'

first_key = True
for key, value in data.items():
if not first_key:
yield ","
else:
first_key = False


yield json.dumps(key) + ": " + json.dumps(value, default=str)

await asyncio.sleep(0)

yield "}}"
await asyncio.sleep(1)


I am very confused so anything is helpful and let me know if you need more information. Thanks

Continue reading...