Wasp•4w ago

CORS issue on content-type: text/event-stream OpenAI

I am using event stream to create an endpoint to stream open ai responses as chunks. I created a POST endpoint (/explainer) to consume it but i am getting cors error when i try to hit from other localhost port. Does anyone know why? FYI: I had another POST endpoint that content-type is json doesn't have CORS issue though only this endpoint has cors issue. Does anyone know why? I am thinking something is wrong with res.setHeader("Content-Type", "text/event-stream");

7 Replies

kapa.ai•4w ago

Hi @yalcinos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems you're experiencing CORS issues with a streaming endpoint in your Wasp application. This is a common issue when working with custom API endpoints in Wasp, especially with non-standard content types like text/event-stream. Based on the knowledge sources, Wasp has some known issues with CORS configuration for custom API endpoints. Here's what might be happening: 1. CORS Preflight Requests: For non-simple requests (like those with custom content types), browsers send a preflight OPTIONS request. Your endpoint might be missing proper CORS headers for this preflight request. 2. Middleware Configuration: Wasp's custom API endpoints don't automatically use all the default middleware that operations do, which can lead to CORS issues. The recommended solution is to use an apiNamespace to properly configure CORS for your endpoint:

apiNamespace streamingApi {
  middlewareConfigFn: import { streamingApiMiddleware } from "@src/apis",
  path: "/your-endpoint-path"
}

apiNamespace streamingApi {
  middlewareConfigFn: import { streamingApiMiddleware } from "@src/apis",
  path: "/your-endpoint-path"
}

Then in your implementation file:

import cors from 'cors'
import { config } from 'wasp/server'

export const streamingApiMiddleware = (middlewareConfig) => {
  // Configure CORS to allow your streaming content type
  middlewareConfig.set('cors', cors({ 
    origin: config.allowedCORSOrigins,
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }))
  return middlewareConfig
}

import cors from 'cors'
import { config } from 'wasp/server'

export const streamingApiMiddleware = (middlewareConfig) => {
  // Configure CORS to allow your streaming content type
  middlewareConfig.set('cors', cors({ 
    origin: config.allowedCORSOrigins,
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization']
  }))
  return middlewareConfig
}

This issue has been recognized by the Wasp team as a confusing part of their API. As mentioned in this GitHub issue, "We had a couple of people so far being confused on how to correctly set up cors to work with their api methods. The common pitfall seems to be that people are not aware that they also have to set CORS for OPTION, for which you usually then need apiNamespace." If you're still experiencing issues, you might need to customize the global middleware as described in the Middleware Configuration docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @yalcinos, 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?

yalcinosOP•4w ago

I have already setup a global middleware and it works fine for auth/me post endpoint.(No cors issue) Cors issue only appears on explainer endpoint which is a SSE

Carlos•4w ago

Hey @yalcinos! CORS permissions can fail when a request has "special" headers (such as the ones maybe sent on an SSE connection), and those headers are not explicitly allowed. The browser should give you a warning on the console explaining why CORS was not allowed, probably with the name of a header.

yalcinosOP•4w ago

Hi Carlos, It just says that this generic error message 😦

Carlos•4w ago

Oh I think I see the problem. You have your frontend outside of Wasp, right? You need to tell the CORS middleware about it. You're configuring CORS with origin: config.allowedCORSOrigins,, but that only includes the origins Waps knows about i.e. the Wasp-served frontend at localhost:3000. Have your origin be "http://localhost:5173".

yalcinosOP•4w ago

Hey Carlos, Thank you for your reply. I am already allowing for all in development mode The interesting thing is that. I have another endpoint that has POST that i am calling outside of wasp. That works fine. I feel like it is something related to Content-type text/event-stream 🧐

yalcinosOP•4w ago

@Carlos I switched to the GET endpoint and pass payload in the query and it started working... :wizardboi:

Gaming

Programming

CORS issue on content-type: text/event-stream OpenAI

Did you find this page helpful?