1

I am running my FastAPI server on 127.0.0.1:8000 and my Nextjs frontend on localhost:3000. When I send cookies from the server to the frontend, I can see the response contains the cookies I want. However, they are stored under 127.0.0.1:8000 instead of localhost:3000, so when I make a request with axios from the frontend, cookies are not sent back to the server. What should I do to have the cookies under localhost:3000 instead of the server's url? I have checked several questions about this and played around with the domain field, httponly, etc. without any success. My current FastAPI configuration is the following:

origins = [
    "http://localhost",
    "http://localhost:3000"
]
app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

And I set cookies like:

response.set_cookie(
            key="authzRefreshToken",
            value=tokens['refresh_token'],
            httponly=False,
            expires=refresh_token_cookie_expire_date,
            samesite= 'strict' if IS_PRODUCTION else 'none',
            path="/"
        )

Here I place some screenshot where it can be seen cookies are not stored under frontend url and the other image is the server's response.

https://postimg.cc/zLCsMHrc https://postimg.cc/phkgVNyQ

Thank you in advance and regards

Javier Guzmán
  • 1,014
  • 2
  • 13
  • 27
  • When setting cookies in your FastAPI server, you can include the domain attribute in the set_cookie method to specify the domain that the cookie should be valid for. In your case, you can set the domain to "localhost" to ensure that the cookie is valid for both the server and the frontend. – Obaskly Apr 07 '23 at 05:25
  • Your frontend would have to set the cookie. Since your frontend doesn’t do HTTP responses because it’s only Javascript, you’ll need to pass the data as regular JSON response or similar to your frontend, and then set the cookie via Javascript. Of course, that cookie would then only be send for requests to your frontend, not to your backend. – deceze Apr 07 '23 at 05:29
  • @Obaskly You can’t set cookies for completely different domains! I couldn’t get my website to set a cookie for Google.com, and that’s a good thing. – deceze Apr 07 '23 at 05:30
  • Try setting __secure=True__ in set_cookie – CodeThing Apr 07 '23 at 05:32
  • You might find [this answer](https://stackoverflow.com/a/73599289/17865804) helpful as well. – Chris Apr 07 '23 at 16:47
  • @deceze I wouldn't suggest creating cookies using JS (in the frontend), as cookies created via JS can't include the `HttpOnly` flag; meaning that such cookies are accessible to the JS `Document.cookie` API, and hence, are more susceptible to JS-based attacks such as XXS (creating the cookie on server side with the `HttpOnly` flag set to `True` doesn't, however, mean that the cookie is protected from other attacks such as CSRF - they could be mitigated though, see [CSRF prevention measures](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)). – Chris Apr 08 '23 at 08:21
  • @deceze OP's issue most likely lies in accessing the ReactJS frontend at `localhost:3000` (in the address bar of the browser), while making requests with axios library to the backend using `127.0.0.1:8000` URL instead of `localhost:8000` (that is why the cookie is created for `127.0.0.1` domain instead of `localhost`, as mentioned in OP's question). This information, and more, can be found in the links provided above. – Chris Apr 08 '23 at 08:21
  • I have just wanted to say that after all configuration changes I have tried the only problem is localhost, so I changed it from localhost to 127.0.0.1 on the Nextjs – Javier Guzmán Apr 08 '23 at 08:42

1 Answers1

0

After trying different options I have solved it by running Nextjs on 127.0.0.1 instead of local host, I changed my development running host and port in the package.json file, like this:

"scripts": {
    "dev": "next dev -H 127.0.0.1 -p 3000",
  },
Javier Guzmán
  • 1,014
  • 2
  • 13
  • 27