[GH-ISSUE #1376] [feature]: Better error message for first-time-users: No 'Access-Control-Allow-Origin' header is present #446

Open
opened 2026-03-16 15:21:05 +03:00 by kerem · 22 comments
Owner

Originally created by @guettli on GitHub (Dec 10, 2020).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1376

Is your feature request related to a problem? Please describe.

I try to execute my first GET request and get this result:

image

I think the first-time-user experience could get improved here.

The hint to F12 vanishes soon, and I think accessing the error message via F12 is not a nice solution.

It would be nice, if the software could tell me directly what went wrong. Then maybe some explanation, and
a way how to work around this.

Originally created by @guettli on GitHub (Dec 10, 2020). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1376 **Is your feature request related to a problem? Please describe.** I try to execute my first GET request and get this result: ![image](https://user-images.githubusercontent.com/414336/101740755-89393f80-3ac9-11eb-896b-eca0a7a85013.png) I think the first-time-user experience could get improved here. The hint to F12 vanishes soon, and I think accessing the error message via F12 is not a nice solution. It would be nice, if the software could tell me directly what went wrong. Then maybe some explanation, and a way how to work around this.
Author
Owner

@liyasthomas commented on GitHub (Dec 10, 2020):

Makes sense. Toast is too small to be noticed. I appreciate if you can suggest a better way to enhance error state ux?

<!-- gh-comment-id:742366364 --> @liyasthomas commented on GitHub (Dec 10, 2020): Makes sense. Toast is too small to be noticed. I appreciate if you can suggest a better way to enhance error state ux?
Author
Owner

@AndrewBastin commented on GitHub (Dec 10, 2020):

Umm, we could improve the error UX. But the problem we are facing is that browsers don't let the full details of the network error to be given to the scripts. As far as the script is concerned, we are only given a "Network Error" message and it is pretty generic and is thrown for every network related issue, not only the one you mentioned as an example.

Since we can't exactly know what went wrong, we really can't suggest anything on how to fix it.

<!-- gh-comment-id:742551428 --> @AndrewBastin commented on GitHub (Dec 10, 2020): Umm, we could improve the error UX. But the problem we are facing is that browsers don't let the full details of the network error to be given to the scripts. As far as the script is concerned, we are only given a "Network Error" message and it is pretty generic and is thrown for every network related issue, not only the one you mentioned as an example. Since we can't exactly know what went wrong, we really can't suggest anything on how to fix it.
Author
Owner

@NBTX commented on GitHub (Dec 11, 2020):

This isn't a general solution for any CORS policy - but it would allow us to figure out perhaps if we need to show a full-page dialog prompting them to install the browser extension or enable the proxy.

We could perhaps set up an API route that works in every way except by having an Access-Control-Allow-Origin policy to a random domain. That way we could test by first requesting a 204 to some domain (to establish that the device is connected to the internet) and then make a request to our CORS route - if it succeeds, proxy or extension is enabled, if it fails, the error must be due to CORS hence we can show the full-page dialog.

<!-- gh-comment-id:743406785 --> @NBTX commented on GitHub (Dec 11, 2020): This isn't a general solution for any CORS policy - but it would allow us to figure out perhaps if we need to show a full-page dialog prompting them to install the browser extension or enable the proxy. We could perhaps set up an API route that works in every way except by having an Access-Control-Allow-Origin policy to a random domain. That way we could test by first requesting a 204 to some domain (to establish that the device is connected to the internet) and then make a request to our CORS route - if it succeeds, proxy or extension is enabled, if it fails, the error must be due to CORS hence we can show the full-page dialog.
Author
Owner

@guettli commented on GitHub (Dec 15, 2020):

@AndrewBastin this is new to me. The script just gets "NetworkError" without a message? Hmm let's focus on this. How could this be changed? Of course this is not an issue of hoppscotch any more, but on the other hand we could make life easier for thousand developers. Who could help here?

<!-- gh-comment-id:745131079 --> @guettli commented on GitHub (Dec 15, 2020): @AndrewBastin this is new to me. The script just gets "NetworkError" without a message? Hmm let's focus on this. How could this be changed? Of course this is not an issue of hoppscotch any more, but on the other hand we could make life easier for thousand developers. Who could help here?
Author
Owner

@AndrewBastin commented on GitHub (Dec 15, 2020):

I don't think we have any other ways to get it from a browser request stand point.

The solution provided by @NBTX sounds great. But I don't really encourage it because of security concerns and the user not knowing that request is being ran on the background through a proxy.

<!-- gh-comment-id:745249536 --> @AndrewBastin commented on GitHub (Dec 15, 2020): I don't think we have any other ways to get it from a browser request stand point. The solution provided by @NBTX sounds great. But I don't really encourage it because of security concerns and the user not knowing that request is being ran on the background through a proxy.
Author
Owner

@AndrewBastin commented on GitHub (May 15, 2021):

@satyam-52 I don't know how this fits into the conversation here exactly.

Hoppscotch already has a built in proxy that circumvents this issue. You can enable it in the Settings page.

<!-- gh-comment-id:841729372 --> @AndrewBastin commented on GitHub (May 15, 2021): @satyam-52 I don't know how this fits into the conversation here exactly. Hoppscotch already has a built in proxy that circumvents this issue. You can enable it in the Settings page.
Author
Owner

@satyam-52 commented on GitHub (May 15, 2021):

@AndrewBastin Just re-read the problem, I just misinterpreted. Will delete my comment :)

<!-- gh-comment-id:841731347 --> @satyam-52 commented on GitHub (May 15, 2021): @AndrewBastin Just re-read the problem, I just misinterpreted. Will delete my comment :)
Author
Owner

@KartikSoneji commented on GitHub (Jul 7, 2022):

@AndrewBastin

because of security concerns and the user not knowing that request is being ran on the background through a proxy.

Hmm? How is this any different from running similar network requests (google analytics, feature tracking)?
If the request is being run through a proxy, it is because the user (or someone on their behalf) explicitly enabled it.

I think adding a route like /connectivity-check/?cors=true to proxyscotch should allow checking both for network connectivity and if CORS is blocked.
As for mixed content, checking requestUrl.protocol == window.location.protocol should cover most cases.

Maybe related: #2248

<!-- gh-comment-id:1177808495 --> @KartikSoneji commented on GitHub (Jul 7, 2022): @AndrewBastin > because of security concerns and the user not knowing that request is being ran on the background through a proxy. Hmm? How is this any different from running similar network requests (google analytics, feature tracking)? If the request is being run through a proxy, it is because the user (or someone on their behalf) explicitly enabled it. I think adding a route like `/connectivity-check/?cors=true` to proxyscotch should allow checking both for network connectivity and if CORS is blocked. As for mixed content, checking `requestUrl.protocol == window.location.protocol` should cover most cases. Maybe related: #2248
Author
Owner

@imskr commented on GitHub (Oct 2, 2022):

Can I work on this?

<!-- gh-comment-id:1264584011 --> @imskr commented on GitHub (Oct 2, 2022): Can I work on this?
Author
Owner

@liyasthomas commented on GitHub (Oct 2, 2022):

Hi @imskr, feel free to pick up this feature. Do let us know if you need any help.

<!-- gh-comment-id:1264626543 --> @liyasthomas commented on GitHub (Oct 2, 2022): Hi @imskr, feel free to pick up this feature. Do let us know if you need any help.
Author
Owner

@varun-s22 commented on GitHub (Apr 21, 2023):

Hi @liyasthomas, is this still open?.. can i take it?
also how are we planning to show the message on the client side?
do we show some popup notifications (like Toast, which i read above)?

<!-- gh-comment-id:1518357257 --> @varun-s22 commented on GitHub (Apr 21, 2023): Hi @liyasthomas, is this still open?.. can i take it? also how are we planning to show the message on the client side? do we show some popup notifications (like Toast, which i read above)?
Author
Owner

@Amit-Morade commented on GitHub (Oct 17, 2023):

can I work on this?

<!-- gh-comment-id:1766223297 --> @Amit-Morade commented on GitHub (Oct 17, 2023): can I work on this?
Author
Owner

@VineeTagarwaL-code commented on GitHub (Nov 23, 2023):

Assign me please , i want to work on this

<!-- gh-comment-id:1823837133 --> @VineeTagarwaL-code commented on GitHub (Nov 23, 2023): Assign me please , i want to work on this
Author
Owner

@saifkp517 commented on GitHub (Nov 4, 2024):

hey @guettli has there been any updates? if not could i get assigned to this?

<!-- gh-comment-id:2454255679 --> @saifkp517 commented on GitHub (Nov 4, 2024): hey @guettli has there been any updates? if not could i get assigned to this?
Author
Owner

@guettli commented on GitHub (Nov 7, 2024):

@saifkp517 I just created the issue. I won't work on it, since I work in a different environment now. I think: Just do it!

<!-- gh-comment-id:2461945395 --> @guettli commented on GitHub (Nov 7, 2024): @saifkp517 I just created the issue. I won't work on it, since I work in a different environment now. I think: Just do it!
Author
Owner

@JunaidMancheri commented on GitHub (Apr 26, 2025):

@liyasthomas Is this task still pending? If yes I would love to work on it. Please let me know, thank you!

<!-- gh-comment-id:2831993058 --> @JunaidMancheri commented on GitHub (Apr 26, 2025): @liyasthomas Is this task still pending? If yes I would love to work on it. Please let me know, thank you!
Author
Owner

@farhanmir commented on GitHub (Oct 7, 2025):

I can work on this if this is still pending.

<!-- gh-comment-id:3378518150 --> @farhanmir commented on GitHub (Oct 7, 2025): I can work on this if this is still pending.
Author
Owner

@A-yushupadhyay commented on GitHub (Oct 9, 2025):

Hi, I’m Ayush — I’d like to work on this issue. Can I take this one?

<!-- gh-comment-id:3384478501 --> @A-yushupadhyay commented on GitHub (Oct 9, 2025): Hi, I’m Ayush — I’d like to work on this issue. Can I take this one?
Author
Owner

@ansonsaju commented on GitHub (Dec 20, 2025):

Hi, I’m Anson 👋
I’m interested in working on this issue as part of my open-source learning.
May I take this up?

<!-- gh-comment-id:3677484392 --> @ansonsaju commented on GitHub (Dec 20, 2025): Hi, I’m Anson 👋 I’m interested in working on this issue as part of my open-source learning. May I take this up?
Author
Owner

@saksham242007 commented on GitHub (Mar 2, 2026):

Hi! I'd like to work on improving this error message and add a clearer explanation in the UI. Could you please assign this to me?

<!-- gh-comment-id:3986142929 --> @saksham242007 commented on GitHub (Mar 2, 2026): Hi! I'd like to work on improving this error message and add a clearer explanation in the UI. Could you please assign this to me?
Author
Owner

@VishwaVikas2006 commented on GitHub (Mar 12, 2026):

Hi, I’d like to work on this issue. Could you please assign it to me?

<!-- gh-comment-id:4044229682 --> @VishwaVikas2006 commented on GitHub (Mar 12, 2026): Hi, I’d like to work on this issue. Could you please assign it to me?
Author
Owner

@codewithaslam commented on GitHub (Mar 13, 2026):

Hi! I would like to work on this issue as part of the FOSS United Hackathon.
Could this issue be assigned to me?

<!-- gh-comment-id:4056834933 --> @codewithaslam commented on GitHub (Mar 13, 2026): Hi! I would like to work on this issue as part of the FOSS United Hackathon. Could this issue be assigned to me?
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#446
No description provided.