transmit-client: CORS error

[Sa1ch]

Hello! I created an embedded chat widget that works through Transmit, and when I connect it to third-party sites, I get a CORS error at the address: /__transmit/subscribe ❌

Although other requests go through fine. For example, this one: /__transmit/events?uid=45596506-16af-41cb-a610-bc4985dad17c✅

I have a CORS configuration:

import { defineConfig } from '@adonisjs/cors';
const corsConfig = defineConfig({
enabled: true,
origin: true,
methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE'],
headers: true,
exposeHeaders: [],
credentials: true,
maxAge: 90,
});
export default corsConfig;

What is my problem?

[RomainLanz]

Hey @Sa1ch! 👋🏻

It looks like the issue is from your configuration/setup and not from Transmit.
The best to gather any help would be to provide a repository with the minimum amount of code to reproduce the issue.

[Sa1ch]

Thank you for your response!

I've been trying to solve this problem for two days now, but I can't seem to fix it! I would be very grateful if you could help me.

https://github.com/Sa1ch/test_chat

[RomainLanz]

It looks like you are using localhost to connect but you don't authorize this "domain" in your CORS configuration.

[Sa1ch]

There are no issues with localhost when running the test development.
When building the project, there are also no problems if I move it to my server.
But when I connect the chat to a foreign domain, a CORS error occurs when requesting the address /__transmit/subscribe.

I tried specifying the remote domain in the CORS configuration, for example: origin: ['https://example.com'].

But that doesn't help me.
For some reason, other requests go through normally, but the subscribe request is blocked.

[Sa1ch]

It feels like the CORS settings are not working for /__transmit/subscribe 🤷‍♂️

[Sa1ch]

Unfortunately, I still can't fix this problem. The chat development is at a standstill.

[RomainLanz]

It seems the issue is likely on your end. To better understand the potential CORS misconfiguration, please double-check the headers returned from the /__transmit/subscribe endpoint. This may provide more insight into the problem.

[Sa1ch]

I solved the problem. I had to use Envoy proxy instead of Nginx, and the CORS issue immediately disappeared. It's very strange though, because the first thing I did when I encountered this problem was to change my Nginx config to allow CORS, but that didn't help.

It would be nice if the AdonisJs documentation included information on configuring Envoy as well.

Thank you for your help.

[shazzsamed]

Yes also have the same problem while using it in vue

Request

GET /__transmit/events?uid=f3e0e4b2-1385-4699-9c05-5a0eb3e72cff HTTP/1.1
Accept: text/event-stream
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-GB,en
Cache-Control: no-cache
Connection: keep-alive
Cookie: username-localhost-8888=2|1:0|10:1724568116|23:username-localhost-8888|196:eyJ1c2VybmFtZSI6ICI1NmI4YzVjYTQ3N2Y0NWJmOGQ3YzM5ZWQyNGM2NjRhMCIsICJuYW1lIjogIkFub255bW91cyBFdWFudGhlIiwgImRpc3BsYXlfbmFtZSI6ICJBbm9ueW1vdXMgRXVhbnRoZSIsICJpbml0aWFscyI6ICJBRSIsICJjb2xvciI6IG51bGx9|5cbce6996804aaa513b4155f6bd0d40c5364228a817b873bbe0509a2ce8ee4ee; _xsrf=2|8ca7310f|4954584c7d1c9c23e71ebcacfe5a25e3|1724568116; google_oauth_state=e%3ARgLDRk1qOsz2Jlgkm-fbBjx9aBuEiQdmb9SXm0DB54MP1upma_lbFTIdVkaKKLltubG0vj9YqJZG5cmc6GPdzgSjh6oHm6gHFEWgfzB-Voc.elFES3Rlajk2SmIzZ0gwOQ.NBNfXR2LESL_XMbfF9vcXxe6HGTFTzxenk-uVMN3iOU; adonis-session=s%3AeyJtZXNzYWdlIjoidTIwcmFhNmo5a3lxOTMxZjVieGdzZWxqIiwicHVycG9zZSI6ImFkb25pcy1zZXNzaW9uIn0._dOG5C5i9ZfPkOliJo7uPWs7cFq9lLcWbwws_ewOBUs
Host: localhost:3333
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
sec-ch-ua: "Chromium";v="128", "Not;A=Brand";v="24", "Brave";v="128"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"

Response

HTTP/1.1 200 OK
Cache-Control: private, no-cache, no-store, must-revalidate, max-age=0, no-transform
Connection: keep-alive
Content-Type: text/event-stream
Expire: 0
Pragma: no-cache
X-Accel-Buffering: no
Date: Tue, 17 Sep 2024 05:21:02 GMT
Transfer-Encoding: chunked

[RomainLanz]

Can you provide a repository so I can reproduce your issue?

[shazzsamed]

https://github.com/shazzsamed/transmit-cors

Here is the repository to reproduce the error

[RomainLanz]

I have found the issue, expect a fix tomorrow, 👍🏻

[RomainLanz]

Can you try again with the latest release?

[shazzsamed]

Yup... Now its working completely fine. Thanks for the fix