Ionic 离子React/电容器,请求在网络版本和 Postman 上工作,但不在设备上

x6492ojm  于 2023-04-18  发布在  Ionic
关注(0)|答案(2)|浏览(158)

我使用axios来请求从我的外部API获取数据(它是带有ExpressJS和Nginx的HTTP AWS服务器)。我在我的本地机器上使用Ionic应用程序的Web版本进行了测试,一切都在预期中。如果我使用手机的浏览器,我也可以获取数据。
Postman 也一样,我可以毫无问题地获取数据。
这些请求唯一不起作用的地方是实际设备。查看Android Studio控制台,错误是:“Msg:Network Error”(无法弄清楚如何从axios错误对象获取更多信息)。
我按照官方的Ionic文档配置了CORS。我已经设置了所有需要的origin和选项(不能使用 * origin,因为我必须在请求中使用凭据)。Express配置看起来像这样:

const corsOptions = {
  origin: [
    'http://localhost:8100',
    'http://localhost:8080',
    'http://localhost',
    'capacitor://localhost',
    'ionic://localhost',
  ],
  credentials: true,
  optionsSuccessStatus: 200,
  exposedHeaders: ["set-cookie"]
}

// Enable preflight requests for all routes
app.options('*', cors(corsOptions));

app.use(cors(corsOptions));

在客户端(请求示例):

try {
  const response = await axios('http://my.api.url', {
    method: 'get',
    withCredentials: true,
      headers: {
        'Accept': 'application/json'
      }
    });
  
  const data = response.data;
      
  // Do something with the data
      
} catch(error) {
  console.log(error);       
};

我认为这与Capacitor有关,可能是非https API的问题(但问题是为什么它与Web版本一起工作)。我尝试禁用请求的凭据,但错误再次发生。此外,删除Nginx似乎也没有改变任何事情。
更新:axios也说请求已经发送,但服务器没有响应。

w41d8nur

w41d8nur1#

我把它整理好了,我必须跟着做。
1.不得不在我的网络服务器上添加SSL(我使用了letsencrypt)。
1.不得不在capacitor.config.json中添加以下内容:
“server”:{“allowNavigation”:[“我的.API.url”] }
官方电容器文档-常见配置

a14dhokn

a14dhokn2#

这是因为Laravel的CSRF令牌问题。
干脆去
app/Http/Middleware/VerifyCsrfToken.php
在受保护的$except数组中添加'api/*',如下所示(这是一个快速解决方案)

protected $except = [
    'api/*'
  ];

相关问题