仅在移动浏览器上在Axios中发布请求的网络错误

编程问答 2022-08-11

问题描述

我正在使用Reactjs作为前端，以Lumen作为后端，并在本地服务器上运行它们。
我正在尝试使用以下函数从Axios调用rest api。

import Axios from "axios";

export const apiCall = async (url,data) => {
    try {
        const response = await Axios.post(url,data);
        return response.data;
    } catch (error) {
        console.log(error);
    }
}

由于请求被CORS策略阻止，我在Lumen prject的index.PHP文件中添加了以下代码。

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET,POST,PATCH,PUT,DELETE,OPTIONS");
header("Access-Control-Allow-Headers: Origin,Access-Control-Allow-Origin,X-API-KEY,Origin,X-Requested-With,Content-Type,Accept,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,X-Auth-Token");
$headers = [
    "Access-Control-Allow-Methods" => "POST,GET,OPTIONS,DELETE","Access-Control-Allow-Headers" => "Origin,X-Auth-Token"
];

if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
    return response()->make('OK',200,$headers);
}

在桌面浏览器上，我成功获得了响应。但是我经常在移动浏览器（在android和ios上）上出现网络错误，如下所示。

{"message":"Network Error","name":"Error","stack":"Error: Network Error at createError (http://127.0.0.1:3000/static/js/0.chunk.js:871:15)\n    at XMLHttpRequest.handleError (http://127.0.0.1:3000/static/js/0.chunk.js:366:14)","config":{"url":"http://127.0.0.1/smart_ivr/public/index.PHP/login/phone","method":"post","data":"{\"cli\":\"1612312312\"}","headers":{"Accept":"application/json,text/plain,*/*","Content-Type":"application/json;charset=utf-8"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfheaderName":"X-XSRF-TOKEN","maxContentLength":-1}}

如何在移动浏览器上解决此问题？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axiosaxiosaxioslumenreactjsreactjsreactjsreactjs