Wasp•3mo ago

Problem with cors out of no where

login:25 Uncaught SyntaxError: Unexpected end of input (at login:25:41)Understand this error login:1 Access to XMLHttpRequest at 'https://lecturelab-server.fly.dev/auth/me' from origin 'https://lecturelab-client.fly.dev' 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.Understand this error index-BZgIB584.js:57

GET https://lecturelab-server.fly.dev/auth/me net::ERR_FAILED (anonymous) @ index-BZgIB584.js:57 xhr @ index-BZgIB584.js:57 o3 @ index-BZgIB584.js:59 Promise.then _request @ index-BZgIB584.js:60 request @ index-BZgIB584.js:59 I pushed up some new code and deployed and then it stopped showing the log in button my navbar and when i go to /login and try to login i get this error ho.<computed> @ index-BZgIB584.js:60 (anonymous) @ index-BZgIB584.js:55 r @ index-BZgIB584.js:60 queryFn @ index-BZgIB584.js:60 g @ index-BZgIB584.js:40 j @ index-BZgIB584.js:40 VC @ index-BZgIB584.js:40 fetch @ index-BZgIB584.js:40 executeFetch @ index-BZgIB584.js:40 onSubscribe @ index-BZgIB584.js:40 subscribe @ index-BZgIB584.js:40 (anonymous) @ index-BZgIB584.js:48 W7 @ index-BZgIB584.js:38 Bp @ index-BZgIB584.js:40 ml @ index-BZgIB584.js:40 (anonymous) @ index-BZgIB584.js:40 z @ index-BZgIB584.js:25 ie @ index-BZgIB584.js:25Understand this error login:1 Access to XMLHttpRequest at 'https://lecturelab-server.fly.dev/auth/email/login' from origin 'https://lecturelab-client.fly.dev' 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.Understand this error index-BZgIB584.js:57

POST https://lecturelab-server.fly.dev/auth/email/login net::ERR_FAILED

13 Replies

MEE6•3mo ago

Wohooo @Wix, you just became a Waspeteer level 2!

kapa.ai•3mo ago

Hi @Wix. 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 web application tries to access resources from a different domain, protocol, or port than its own. In your case, it seems like your client-side application (running on 'https://lecturelab-client.fly.dev') is trying to access your server-side application (running on 'https://lecturelab-server.fly.dev'), but the server is not allowing it due to CORS policy. To resolve this issue, you need to configure your server to allow CORS requests from your client application. In Wasp, you can do this by defining custom middleware for your APIs in the Wasp file. Here's an example of how you can do this:

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.js
import cors from 'cors'  
import { config } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig) => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this example, the server is configured to allow CORS requests from 'https://example1.com' and 'https://example2.com'. You should replace these with the URL of your client application. For more information about configuring CORS in Wasp, you can refer to the official documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works). If you've already configured CORS and are still encountering this issue, it's possible that something in your recent code changes may have affected the CORS configuration. I would recommend reviewing your recent changes to see if anything could have affected the CORS settings. If none of these solutions work, it might be a good idea to upgrade your Wasp app to the latest version, as suggested in one of the Discord threads (https://discord.com/channels/686873244791210014/1201898985300971540). Sometimes, issues can be resolved with the latest updates and fixes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

WixOP•3mo ago

can you give me the typescript equvilent of the code? @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here is the TypeScript equivalent of the code:

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.ts
import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.ts
import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://example1.com',> '<https://example2.com']> }))  
 return middlewareConfig  
}

In this TypeScript version, we've added type annotations to the serverMiddlewareFn function. The middlewareConfig parameter and the return value are both of type MiddlewareConfig, which is imported from 'wasp/server'. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

WixOP•3mo ago

@kapa.ai import cors from 'cors'
import { config, MiddlewareConfig } from 'wasp/server'

export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {
// Example of adding extra domains to CORS.
middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://lecturelab-client.fly.dev/', 'https://lecturelab-server.fly.dev/'] }))
return middlewareConfig
}
Cannot find module 'cors' or its corresponding type declarations. Expression expected.ts(1109) Expression expected.ts(1109)

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Cannot find module 'cors' or its corresponding type declarations" suggests that the 'cors' module is not installed in your project, or TypeScript can't find the type declarations for it. To resolve this issue, you need to install the 'cors' module and its type declarations. You can do this by running the following commands in your project directory:

npm install cors
npm install @types/cors --save-dev

npm install cors
npm install @types/cors --save-dev

The first command installs the 'cors' module, and the second command installs the TypeScript type declarations for 'cors'. After running these commands, TypeScript should be able to find the 'cors' module and its type declarations. As for the "Expression expected.ts(1109)" error, it seems like there's a syntax error in your code. The URLs in the 'origin' array should be strings, not expressions. Here's the corrected code:

import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev/',> '<https://lecturelab-server.fly.dev/']> }))  
 return middlewareConfig  
}

import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev/',> '<https://lecturelab-server.fly.dev/']> }))  
 return middlewareConfig  
}

In this corrected code, the URLs 'https://lecturelab-client.fly.dev/' and 'https://lecturelab-server.fly.dev/' are strings, not expressions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

WixOP•3mo ago

@kapa.ai Error: Dependency conflict for user dependency (@types/cors, ^2.8.17): Version must be set to the exactly the same version as the one wasp is using: ^2.8.5\x1B[0m\n'

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing indicates that there's a version conflict between the version of @types/cors that your project is using (^2.8.17) and the version that Wasp is using (^2.8.5). In the current version of Wasp, if Wasp is already internally using a certain dependency with a certain version specified, you are not allowed to define that same npm dependency yourself while specifying a different version. If you do that, you will get an error message telling you which exact version you have to use for that dependency. This means Wasp dictates exact versions of certain packages, so for example you can't choose the version of @types/cors you want to use. To resolve this issue, you should change the version of @types/cors in your package.json file to ^2.8.5, which is the version that Wasp is using. Here's how you can do this: 1. Open your package.json file. 2. Find the line that looks like this: "@types/cors": "^2.8.17", 3. Change it to this: "@types/cors": "^2.8.5", 4. Save the package.json file. 5. Run npm install to install the correct version of @types/cors. Please note that Wasp is currently working on a restructuring that will solve this and some other quirks. You can follow the progress on this issue #734 (https://github.com/wasp-lang/wasp/issues/734). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

WixOP•3mo ago

@kapa.ai \x1B[33m[\x1B[0m \x1B[33mWasp\x1B[0m \x1B[33m]\x1B[0m ext-src/serverSetup.ts(6,105): error TS1109: Expression expected.\n' + '\x1B[33m[\x1B[0m \x1B[33mWasp\x1B[0m \x1B[33m]\x1B[0m ext-src/serverSetup.ts(6,147): error TS1109: Expression expected.\x1B[31m\n' + '\n' + '❌ --- [Error] Your wasp project failed to compile: -------------------------------\n' + '\n' + '- SDK build failed with exit code: 2\x1B[0m\n' + '\x1B[31m\n' + '\n' + '❌ --- [Error] Building of wasp project failed: -----------------------------------\n' + '\n' + '1 errors found.\x1B[0m\n'

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message Expression expected typically indicates a syntax error in your TypeScript code. It seems like the errors are occurring in the ext-src/serverSetup.ts file, specifically at characters 105 and 147. Unfortunately, without the actual code from ext-src/serverSetup.ts, it's hard to pinpoint the exact issue. However, common causes for this error include missing or misplaced parentheses, brackets, or commas. Here's an example of what might cause this error:

// Incorrect
let arr = [1, 2, 3, 4,;]

// Correct
let arr = [1, 2, 3, 4];

// Incorrect
let arr = [1, 2, 3, 4,;]

// Correct
let arr = [1, 2, 3, 4];

In the incorrect example, there's an extra comma after the last element in the array, which causes a syntax error. I would recommend reviewing your ext-src/serverSetup.ts file and checking for any syntax errors. If you're still having trouble, you might find it helpful to use a code editor with TypeScript support, which can highlight syntax errors and other issues in your code. If you're still having trouble, please provide the relevant code from ext-src/serverSetup.ts and I'll be happy to help you further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

WixOP•3mo ago

@kapa.ai right now i am using import cors from 'cors'; export const setup = (app) => { app.use(cors({ origin: [ 'https://lecturelab-client.fly.dev', 'http://localhost:3000' ], methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true })); }; export default setup; and server: { setupFn: import setup from "@src/setupServer.js" }, but still getting the same cors error in production but not locall

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The CORS configuration you've provided seems correct. However, the issue might be related to the order of middleware in your server setup. The CORS middleware should be one of the first middleware functions that your Express app uses. If the order is correct, another possibility could be that the server is not correctly recognizing the client's origin. This could happen if there's a proxy server in between, or if the client's origin changes dynamically. In Wasp, you can customize the global middleware to modify the CORS settings for all operations and APIs. Here's an example of how you can do this:

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.ts
import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev',> '<http://localhost:3000'],> methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true }))  
 return middlewareConfig  
}

// main.wasp
app todoApp {  
 // ...  
 server: {  
 setupFn: import setup from "@src/serverSetup",  
 middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"  
 },  
}  

// src/serverSetup.ts
import cors from 'cors'  
import { config, MiddlewareConfig } from 'wasp/server'  
  
export const serverMiddlewareFn = (middlewareConfig: MiddlewareConfig): MiddlewareConfig => {  
 // Example of adding extra domains to CORS.  
 middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://lecturelab-client.fly.dev',> '<http://localhost:3000'],> methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true }))  
 return middlewareConfig  
}

In this example, the server is configured to allow CORS requests from 'https://lecturelab-client.fly.dev' and 'http://localhost:3000'. If none of these solutions work, it might be a good idea to upgrade your Wasp app to the latest version, as suggested in one of the Discord threads (https://discord.com/channels/686873244791210014/1201898985300971540). Sometimes, issues can be resolved with the latest updates and fixes. For more information about configuring CORS in Wasp, you can refer to the official documentation (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Wix, 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?

miho•3mo ago

@Wix is there something a human can help you with?

Gaming

Programming

Problem with cors out of no where