[Solved] (UNI-app) The H5 application on IOS cannot initiate a request. The request status code is 0 and the error message is Request: Fail

1️ problem description

Uni-app project was released as an H5 application, and there was no problem in Android environment. Request: Fail error occurred in some IOS phones with earlier versions.

The request interceptor and vconsole report an error as shown in the following figure. It can be seen from the figure that the request enters the fail callback, and the error is described as: Request :fail. The request status code is 0

2 Analysis of ️ problem

🔸 2.1 Analyzing dependency problems

Since similar errors have occurred in previous H5 projects, I thought there was a problem with the dependency of the project installation, so I created a pure UNI-app project and compiled it into H5, and found that the problem still existed in earlier versions of IOS.

The problem is not caused by dependence

I initially thought there was something wrong with the UNI-App framework, and the official feedback of the bug was submitted at the first time. The bug feedback address is as follows:

  • [Bug] [H5 terminal application] Initiate [uni. Request] Most users’ phones can interact normally, but some users directly enter the fail callback when initiating a request, and promote [Request: Fail]

🔸 2.2 Analyze the uni-APP version problem

As mentioned above, similar problems have not been found in the previous H5 application. The version of UNI-App is found to be inconsistent by comparing the two applications. Therefore, it is suspected that the problem is caused by the version upgrade of UNI-App. The uni-App version was rolled back to the online normal version (I used the CLI version of UNI-app here), and the problem was still found after the version rollback. Therefore, the problem is not caused by the uni-App version upgrade.

The problem is not the UNI-App version

🔸 2.3 Introduce vConsole for further analysis

  • Install vconsole
npm install vconsole
Copy the code
  • Introduce vconsole in the first line of main.js
// main.js

// #ifdef H5
//[Gmy 2021-08-16 15:35:52] Integrate vConsole
   import VConsole from "vconsole";
   const vConsole = new VConsole();
   Vue.use(vConsole);
   console.info("Vconsole - info - test");
// #endif

Copy the code

The problem described above is found through vconsole. The request status code is 0 and there is no response at the back end. If the fault is found, contact the backend to view logs, but no call records of the backend connection port are found. At the same time as the

🔴 It seems the problem is with the request

3️ further positioning problem

Based on the analysis of ️ problem in Step 2, we have a rough position on the error. After several rounds of testing, we finally have a major discovery:

🔴 If the request header hearder is set, an error will be generated. If the request header is cancelled, the request will be sent to the background correctly and the background data will be returned correctly.

However, since the interface needs to use token verification everywhere, it is definitely not possible to run without the request header. The next step is finding solutions and trial and error. Baidu search for hundreds of articles online articles are really good and bad mixed. However, through a large number of literature reading, I have more understanding of the request status code is 0, and have a general idea of the solution to this problem.

  1. Cross-domain, options precheck fails

  2. Request header configuration problem

4️ solution

🔸 4.1 Cross-domain solution

Most articles talk about cross-domain issues, but my project is cross-domain, with the front-end project deployed to server A and the back-end code deployed to server B. Since everyone says it’s a cross-domain problem, I’ll deploy the front and back end projects to a server. The scheme was tested to be feasible. It does seem to be cross-domain.

🔴 does have something to do with cross-domains!

One wonders why only some phones (mainly older versions of IOS) cross domains, while most Android phones and browsers don’t.

Since it is cross-domain, I contacted the background to set CORS to allow cross-domain, but the weird thing happened again, when the background completed the CORS Settings, I deployed the front and back end projects separately, this problem once appeared, really see the ghost!!

🔸 4.2 Modifying the Request Header Configuration

Another solution according to the references:

After options, the server returns the request, but the front-end browser does not post, because the background headers is set to *. Ios13 / android 10 May not recognize the background to allow the existence of a custom request header.

Access-control-allow-headers: * access-control-allow-headers: Accept, Content-Type, Origin, and custom-header will write both the custom and default headers.

Refer to the solution to complete the background configuration, error solved perfectly.

5 ️ ⃣ summary

(UNI-app) The IOS H5 application fails to initiate a request, the request status code is 0, and the error message is Request: Fail. The possible solution is as follows:

plan instructions
Cancel the header Very low solution, not recommended
Deploy front and back end projects together to resolve cross-domain issues General solution
Access-Control-Allow-HeaderslistCustom headers and default headersInstead of using * The perfect solution

This article is published simultaneously on the “front End Knowledge Camp” of G group. Click here to get more quality and interesting content.

🔴 follow the public account

🔴 visit the original link

(after)