[PR #5925] [CLOSED] feat: improve CORS error messages with helpful workarounds #5419

New issue

Closed

opened 2026-03-17 02:52:02 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:52:02 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5925
Author: @mizoz
Created: 3/2/2026
Status: ❌ Closed

Base: main ← Head: better-cors-error-message

📝 Commits (2)

adb9ec9 feat: improve CORS error messages with helpful workarounds
a360400 fix: only show CORS help for actual CORS errors

📊 Changes

4 files changed (+105 additions, -3 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+7 -1)
📝 packages/hoppscotch-common/src/components/http/test/Response.vue (+30 -2)
➕ packages/hoppscotch-common/src/helpers/error-messages/cors-helper.ts (+61 -0)
📝 packages/hoppscotch-common/src/helpers/error-messages/index.ts (+7 -0)

📄 Description

Description

This PR improves the user experience when encountering CORS/network errors by providing:

Clear error explanation - Users now understand what CORS is and why it happens
Actionable workarounds - 3 concrete solutions (Proxy, Desktop app, Extension)
Technical details on demand - Collapsible section with raw error for debugging

Changes

packages/hoppscotch-common/src/helpers/error-messages/cors-helper.ts - New helper utilities
packages/hoppscotch-common/src/components/http/test/Response.vue - Enhanced error UI
packages/hoppscotch-common/locales/en.json - i18n translations

Fixes #1376

Testing

Tested locally with CORS error scenarios
Added/updated tests if applicable
Docs updated if needed

Checklist

Code follows project guidelines
Self-review completed
No console.log or debug statements
Commits are signed

Summary by cubic

Improves CORS/network error UX with targeted guidance: show CORS explanation and three workarounds only when a CORS error is detected, and a generic message for other network failures. Addresses #1376 by guiding users to fix browser‑blocked requests without misleading non‑CORS cases.

New Features
- Enhanced Response view: CORS warning panel with explanation and workarounds (Proxy, Desktop app, Extension), plus a collapsible raw error section.
- New helpers: isCorsError, getCorsErrorMessage, and getNetworkErrorMessage, re‑exported for reuse.
- Added i18n keys for the new messages, including generic_network_error.

^{Written for commit a3604001ff. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5925 **Author:** [@mizoz](https://github.com/mizoz) **Created:** 3/2/2026 **Status:** ❌ Closed **Base:** `main` ← **Head:** `better-cors-error-message` --- ### 📝 Commits (2) - [`adb9ec9`](https://github.com/hoppscotch/hoppscotch/commit/adb9ec9ae140b5cbb45bc1b5def55ec0590ace3d) feat: improve CORS error messages with helpful workarounds - [`a360400`](https://github.com/hoppscotch/hoppscotch/commit/a3604001ffc9ccd5421aa70d1e506caf550dd71f) fix: only show CORS help for actual CORS errors ### 📊 Changes **4 files changed** (+105 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+7 -1) 📝 `packages/hoppscotch-common/src/components/http/test/Response.vue` (+30 -2) ➕ `packages/hoppscotch-common/src/helpers/error-messages/cors-helper.ts` (+61 -0) 📝 `packages/hoppscotch-common/src/helpers/error-messages/index.ts` (+7 -0) </details> ### 📄 Description ## Description This PR improves the user experience when encountering CORS/network errors by providing: 1. **Clear error explanation** - Users now understand what CORS is and why it happens 2. **Actionable workarounds** - 3 concrete solutions (Proxy, Desktop app, Extension) 3. **Technical details on demand** - Collapsible section with raw error for debugging ## Changes - `packages/hoppscotch-common/src/helpers/error-messages/cors-helper.ts` - New helper utilities - `packages/hoppscotch-common/src/components/http/test/Response.vue` - Enhanced error UI - `packages/hoppscotch-common/locales/en.json` - i18n translations ## Related Issue Fixes #1376 ## Testing - [x] Tested locally with CORS error scenarios - [ ] Added/updated tests if applicable - [x] Docs updated if needed ## Checklist - [x] Code follows project guidelines - [x] Self-review completed - [x] No console.log or debug statements - [x] Commits are signed  --- ## Summary by cubic Improves CORS/network error UX with targeted guidance: show CORS explanation and three workarounds only when a CORS error is detected, and a generic message for other network failures. Addresses #1376 by guiding users to fix browser‑blocked requests without misleading non‑CORS cases. - **New Features** - Enhanced Response view: CORS warning panel with explanation and workarounds (Proxy, Desktop app, Extension), plus a collapsible raw error section. - New helpers: isCorsError, getCorsErrorMessage, and getNetworkErrorMessage, re‑exported for reuse. - Added i18n keys for the new messages, including generic_network_error. <sup>Written for commit a3604001ffc9ccd5421aa70d1e506caf550dd71f. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>