CORS related error

[imnoob404]

I'm getting a CORS Related errors on my web browser while trying to access the UI locally. Using https://app.httptoolkit.tech/ works just fine tough.

root@s1:~/httptoolkit# npm run start:web

> start:web
> env-cmd -f ./automation/ts-node.env.js webpack-dev-server --config ./automation/webpack.dev.ts
ℹ ｢wds｣: Project is running at http://local.httptoolkit.tech:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /root/httptoolkit/dist
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 9c8fdf9a536133d90353
Version: webpack 4.46.0
Time: 26221ms
Built at: 08/10/2023 16:59:22
ℹ ｢wdm｣: Compiled successfully.
No issues found.

Here's what I saw from the console log on my browser when trying to open http://local.httptoolkit.tech:8080/:

> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Loading failed for the <script> with source “http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js”. local.httptoolkit.tech:8080:1:1
> Monaco load failed Loading chunk vendors~react-monaco-editor failed.
> (error: http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js) base-editor.tsx:53
> [WDS] Disconnected! client:172
> Previous server version was null index.tsx:131
> Reporting error: Error: Failed to initialize application
>     <anonymous> index.tsx:133
>     fulfilled index.tsx:33
>     promise callback*step index.tsx:35
>     __awaiter index.tsx:36
>     __awaiter index.tsx:32
>     <anonymous> index.tsx:130
>     promise callback* index.tsx:130
>     tsx app.js:28721
>     __webpack_require__ app.js:105
>     0 app.js:29657
>     __webpack_require__ app.js:105
>     <anonymous> app.js:275
>     <anonymous> app.js:278
>  
> Object {  }
> errors.ts:85
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Loading failed for the <script> with source “http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js”. local.httptoolkit.tech:8080:1:1
> Monaco load failed Loading chunk vendors~react-monaco-editor failed.
> (error: http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js) base-editor.tsx:53
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:45456/start. (Reason: CORS request did not succeed). Status code: (null).
> 
> Server initialization failed TypeError: NetworkError when attempting to fetch resource. proxy-store.ts:55
> Loading failed for the <script> with source “http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js”. local.httptoolkit.tech:8080:1:1
> Monaco load failed Loading chunk vendors~react-monaco-editor failed.
> (error: http://local.httptoolkit.tech:8080/vendors~react-monaco-editor.bundle.js)

The errors kept on going and basically the UI just stuck in the "This is taking longer than normal" message and never went through.
I've also tried to build the UI first and put the resulting files to my nginx server instead and still got the same errors.

root@s1:~/httptoolkit# npm run build

> prebuild
> rimraf dist


> build
> run-script-os


> build:default
> env-cmd -f ./automation/ts-node.env.js node --max_old_space_size=4096 node_modules/.bin/webpack --config ./automation/webpack.prod.ts

Sentry source map upload disabled - no token set
Hash: d273fc0ee11dad958a8c
Version: webpack 4.46.0
Time: 102629ms
Built at: 08/10/2023 17:12:55

LOG from InjectManifest
<i> The service worker at ui-update-worker.js will precache
<i>         32 URLs, totaling 21.7 MB.

I've tried using Firefox and Chrome browser with no avail. https://app.httptoolkit.tech/ worked just fine with those two browsers.
I'm using the latest server build from https://github.com/httptoolkit/httptoolkit-server/releases.

Any idea on what I'm doing wrong here ? I would greatly appreciate any assistance, thank you.

[pimterry]

If you run the official server builds in the standard way, they intentionally don't allow connections from anything but the official UI. This avoids cross-site request forgery style attacks (where a malicious website you visit communicates with local services on your machine).

By default, production builds allow connections only from app.httptoolkit.tech, which dev builds also allow various localhost URLs. This is defined here.

There's two options:

• You can run a local server in dev mode from a full checkout of the code, following the instructions in that repo
• You can run the production server release in dev mode, with OCLIF_TS_NODE=0 ./bin/run start instead of ./bin/httptoolkit-server start
  • This avoids some initial setup steps, which result in the server being considered as a production build, with the restrictions that implies
  • OCLIF_TS_NODE is required to correctly run a production build (which bundles and drops various dev-only files and dependencies) in dev mode
• You can modify the server code, and build your own production releases which trust an alternative UI URL instead.

Does that all make sense?

[imnoob404]

Thanks for the answer! I previously created my own fork of the server that disables the cors protection entirely. I don't think it's a good idea tough, hence I'm going to use your provided solution for the time being.