Solution to React Native real machine breakpoint debugging + cross-origin resource loading error, reactnative

Solution to React Native real machine breakpoint debugging + cross-origin resource loading error, reactnative

Preface

There is nothing left to worry about. After a while, React Native has a much better development experience than before. However, when a cross-origin resource loading error occurs during breakpoint debugging on a real machine, some explorations finally solve the problem. Visual testing is a bug in the debugging service of the new version of RN.

There should be a lot of people who have encountered similar problems. Here we will record them. For more information, see.

Breakpoint debugging

First, load and run the RN application on the real machine (process omitted ).

Then, shake the phone, pop up the Development menu, and select "Debug JS Remotely ".

Chrome will automatically open the debugging interface at http: // localhost: 8081/debugger-ui /. Open the console, find the file to be debugged, and add a breakpoint.

Problem: An error occurred while loading cross-origin resources.

Ideally, after the preceding steps, you can perform breakpoint debugging happily. However, the actual situation is not so smooth. After modifying the host according to official instructions, the problem still exists.

The error message displayed on the console indicates an error occurred while loading the cross-origin resource. 192.168.3.126 is the ip address of the Local intranet, and the domain name of the faulty resource is 192.168.3.126.xip.io.

If you do not have a deep understanding of RN, you can come up with two ideas, which will be detailed later.

Enables loading of faulty resources to be the same as debugging pages.

Allow the debugging service to support cross-origin resource Loading

Solution 1: Replace the Host Name

Replace localhost with 192.168.3.126.xip.io, that is, we access the debug interface through http://192.168.3.126.xip.io: 8081/debugger-ui.

The debugging interface is accessed normally, and the resources are loaded normally, done.

The host name 192.168.3.126.xip.io looks a bit strange. Later I will introduce the principle behind it.

Solution 2: CORS

Some developers reported the same error in CORS issue with JS Remote Debugging when using xip. io on github.

The solution is as follows:

Find the node_modules/metro module, modify the Server/index. js and index. js. flow files, and add the following code in the _ processDeltaRequest method.

mres.setHeader("Access-Control-Allow-Origin", "*");

This method is not recommended, but you may try it if you are eager to debug it.

What is 192.168.3.126.xip.io?

Many people may be confused about this host name. How can a host name that does not seem to exist be successfully accessed.

Ping the ip address 192.168.3.126 in the console.

In fact, xip. io is a special domain name. When you query the IP address corresponding to the domain name xxx. xip. io, it will return xxx directly.

For example, the Intranet IP address of my notebook is 192.168.3.126. When I access 192.168.3.126.xip.io, the IP address returned by the DNS query is 192.168.3.126.

The principle is also very simple. The owner of xip. io has self-built DNS resolution service on the public network. When the user initiates a DNS query of xxx. xip. io, it will directly return xxx.

Post

The cross-origin solution mentioned above is not satisfactory. If you have a better solution, please let me know. Thank you.

Reference

Http://xip.io/

CORS issue with JS Remote Debugging when using xip. io

Debugging on a device with Chrome Developer Tools

The solution to the above React Native real machine breakpoint debugging + cross-origin resource loading error problem is all the content that I have shared with you. I hope you can give me a reference, we also hope that you can support the customer's home.