Network Error when adding authentication to todo app
Access to XMLHttpRequest at 'http://localhost:3001/auth/username/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
6 Replies
Hi @laventur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're encountering a CORS (Cross-Origin Resource Sharing) issue. This typically happens when a request is made from a different origin (in this case,
<http://localhost:3000>) to the server (at <http://localhost:3001>), and the server doesn't allow such cross-origin requests.
Unfortunately, the provided knowledge sources do not contain specific information on how to resolve this issue in the context of Wasp. However, it's generally recommended to ensure that your server is configured to allow CORS from the origin making the request.
In the context of Wasp, you might need to check your server configuration or any middleware you're using that handles CORS. If you're using Express.js as your server, for example, you might need to use the cors middleware and configure it to allow requests from your client's origin.
For more detailed help, I would recommend checking the Wasp documentation (https://wasp-lang.dev/docs) or asking for help in the Wasp Discord community (https://discord.com/channels/686873244791210014/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @laventur, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?yes that would be great thank you!
Hey @laventur ! So this should work locally without any issues. Coud you tell me more about your setup? Wasp version, OS, node version.
You mentioned ading auth to todo app -> how did you create this todo app, with
wasp new -t todo-ts?
What usually happens is that errors claims it is CORS, but what is really happening is just that the server is crashing due to some other reason and then you get this CORS error. So please check the server logs in the terminal -> are you getting any other errors there?Hi! yes sure!
I'll just sen you this:
app TodoApp {
wasp: {
version: "^0.13.0"
},
title: "TodoApp",
auth: {
// Tells Wasp which entity to use for storing users.
userEntity: User,
methods: {
// Enable username and password auth.
usernameAndPassword: {}
},
// We'll see how this is used in a bit.
onAuthFailedRedirectTo: "/login"
}
}
I followed the tutorial here: https://wasp-lang.dev/docs/tutorial/auth
7. Adding Authentication | Wasp
Most modern apps need a way to create and authenticate users. Wasp makes this as easy as possible with its first-class auth support.
Great! Server logs, in the terminal, any errors there?
Also keep an eye on warning about
wasp db migrate-dev -> have you done that? wasp db migrate-dev?