Fetch in JavaScript for FastApi in localhost

Question

How can you use my Api made with FastAPI, from my localhost, from an external html, for example, it is my simple implementation of test:

main.py:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def main():
    return {"message": "Hello World"}

index.html:

<html>
<head>
    <title>Item Details</title>
</head>
<body>
    <script>
        //var url = 'http://localhost:8000';
        fetch('http://127.0.0.1:8000/')
        .then(res => res.json())
        .then(data => {console.log(data)})
    </script>
    <h1></h1>
</body>
</html>

but the return navigator(Safari) is:

[Error] Origin null is not allowed by Access-Control-Allow-Origin. [Error] Fetch API cannot load http://127.0.0.1:8000/ due to access control checks. [Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (127.0.0.1, line 0) [Error] Unhandled Promise Rejection: TypeError: Origin null is not allowed by Access-Control-Allow-Origin. (anonymous function) promiseReactionJob

You need to enable CORS server-side: fastapi.tiangolo.com/tutorial/cors — user5734311
– user5734311, Commented Sep 20, 2020 at 23:28
Origin null is not allowed - how are you loading the index.html? http://? file:///? — Jaromanda X
– Jaromanda X, Commented Sep 20, 2020 at 23:30

Pedro Rogério · Accepted Answer · 2020-09-20 23:30:48Z

6

You have to enable CORS in your API:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost",
    "http://localhost:8000"
    "http://localhost:8080",
]

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


@app.get("/")
async def main():
    return {"message": "Hello World"}

See more information about CORS here.

answered Sep 20, 2020 at 23:30

Pedro Rogério

1761 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luis Ramirez Over a year ago

Access to fetch at '127.0.0.1:8000' from origin '127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Collectives™ on Stack Overflow

Fetch in JavaScript for FastApi in localhost

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related