Axios failed to cross domain request on mobile web page, HTTP status code returned 0
Project Description: using Vue framework, AJAX request using Axios, the back-end has set CORS
In the case of cross domain, there is no problem in the PC browser access, you can get data normally
The HTTP status code returned by the browser on the mobile phone is 0, so the data cannot be obtained, as shown in the figure
First of all, in order to prove that it is caused by cross domain problems, I made a homologous request on my own server. There is no problem on the mobile terminal, and the data can be obtained normally. This can prove that it is caused by cross domain problems
At the same time, in order to prove that it is Axios related, I use native Ajax and jQuery for cross domain requests respectively, and there is no problem on the mobile side.
It can be summarized as follows: in the case of cross domain, Axios has problems in the mobile request
So I think of two ways to deal with it: the first is not to make cross domain requests, but this is limited to the back-end, because the web page is stored in the back-end server, and the domain name of the general API is a secondary domain name, so the secondary domain name is also a cross domain request, so this method is abandoned. The second is to use the native Ajax request or jQuery instead of the Axios request If so, there will be a lot less functions.
I would like to ask why this situation occurs on the mobile end when cross domain requests are made with Axios! Thank you for your answers.
Supplementary note: the built-in QQ browser and mobile chrome in wechat can request normally, but the request fails in UC and QQ browser alone
I'm sorry to have kept you waiting for a long time. I didn't expect that so many people had this problem. I also mentioned that CORS is used to solve the cross domain problem. Although I have solved this problem, I haven't found out the reason yet. To solve this problem, the back end has changed a line of code: access control allow headers: * / / error. The headers above can't be set to *. To set the specific fields, the following is access control allow headers: content type / / right
The back end allows cross domain. Secondly, cross domain is limited by the browser's homology policy, so jQuery can't solve the problem.
The reason may be that the HTTP page requests the data of HTTP, or the HTTP page requests the data of HTTPS. But there will be no error in IOS. Android is normal.
I also encountered this problem, I appeared on the wechat client in the window. Cross domain has been set in the back end, and both the front and back end are HTTPS. And try to change access control allow headers: * to access control allow headers: content type, which is useless
