A way to easily enable cross-origin-request for React/ReactNative metro / devtool server access

[deckyfx]

Describe the Feature

Background:

I have peculiar setups for developing React Native (RN), as I enjoy having remote coding.
My code is in a remote Linux machine, then I connect to it via SSH in vs-code on Windows, then I connect my Linux to an Android device with ADB.

I host the code on Linux so it has a better unix dev environment and builds speed, but I access it from Windows for ease of multi-tasking like browsing, etc, because of this, I can't run the app on Emulator as the AVD and Android-SDK are in Linux machine. that's why I connect it to real device.

Issues:

Prior to RN v0.77, there was no issue with this setup, but since v0.77 removed the console.log stream to metro and encouraged devs to use rn-dev-tools, now I have an issue as the rn-dev-tools opening chrome locally (on the Linux machine), and currently that dev tools is restricted to be used in localhost.

Solution

The solutions are pretty simple, just disable securityHeadersMiddleware so the metro can accept connections from any origin, but currently there is no easy way to do this, also may need to have a feature to easily get connected device id as the rn-dev-tool address has format

http://<host | localhost>:<port | 8081>/debugger-frontend/rn_fusebox.html?ws=%2Finspector%2Fdebug%3Fdevice%3D<device_id>%26page%3D1&sources.hide_add_folder=true

Decoded
http://<host | localhost>:<port | 8081>/debugger-frontend/rn_fusebox.html?ws=/inspector/debug?device=<device_id>&page=1&sources.hide_add_folder=true

Possible Implementations

For example, add keyboard shortcut to get dev tool addresses, port, and device_id connected

Related Issues

[liamjones]

Recently, there's been some discussion in a similar vein on the discussions & proposals repo: react-native-community/discussions-and-proposals#819 (comment)