无法使用 Capacitor 发送 post 请求（在常规网页上工作正常）

Question

我正在使用 Ionic (Vue) 开发一个应用程序，并且已经设置了服务器端（Python 和 FastAPI）。

虽然我在运行我的应用程序在浏览器 (ionic serve) 上发送请求没有问题，但在运行它在 iOS模拟器。

我已经尝试了 axios 和 Capacitor HTTP 库，结果是一样的。以下仅为客户的相关部分：

<template>
<base-layout page-title="Choose Players" page-default-back-link="/home">
  <ion-item v-for="contact in contacts" :key="contact.phoneNumbers[0]" @click="toggleContact(contact)">
    <ion-icon v-if="isContactSelected(contact)" slot="end" :icon="checkmark"/>
    {{ contact.displayName }}
  </ion-item>
  <ion-button expand="block" @click="inviteSelectedContacts">Invite Selected Contacts</ion-button>
</base-layout>
</template>

<script>
import { IonItem, IonIcon, IonButton } from "@ionic/vue";
import { checkmark } from 'ionicons/icons';
import { Contacts } from "@capacitor-community/contacts";
import { serverURL } from '@/components/Config';
// import axios from 'axios';
import { Http } from '@capacitor-community/http';


export default {
  name: "AddPlayers",

  

  data() {
    return {
      contacts: [],
      chosenContacts: new Set()
    };
  },

  methods: {
    
    async inviteSelectedContacts() {
      let data = {userId: 'test id', users: this.chosenContacts}
      let url = `${serverURL}/inviteUsers`;
      try {
        let options = {url: url, data: data}
        let res = await Http.post(options);
        if (res.status === 200){
          alert(res.status)
        }
        return res.data
      }
      catch (err) {
        alert(err);
      }
    }
  },

我的结论是，它与 CORS 没有为 Capacitor 正确定义 有某种关系（因为它们在浏览器上工作得很好），但我无法理解我应该在哪里定义这些。

服务器 API url 是 http://fastapi.localhost:8008

更新： 我能够记录并查看错误（通过 Xcode）：

[log] - {"message":"Network Error","name":"Error","stack":"createError@\nhandleError@","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json"},"method":"post","url":"http://fastapi.localhost:8008/inviteUsers","data":"{\"userId\":\"test id\",\"users\":{}}"},"status":null}

Answer 1

在这上面浪费了太多时间...

事实证明，解决方案是将开发服务器 URL 更改为基于 IP 的服务器：http://127.0.0.1:8008（在我的例子中）。

我不知道为什么 Capacitor 不接受 DNS 命名。

我能够通过将这个虚拟端点添加到我的服务器来验证它：

from fastapi import FastAPI, Request
...
@app.post("/dummypath")
async def get_body(request: Request):
    return await request.json()

现在来自客户：

async inviteSelectedContacts() {
  // let data = {userId: 'test id', users: this.chosenContacts}
  let data = {}
  let url = `${serverURL}/dummypath`;
  try {
    let res = await axios.post(url, data);
    if (res.status === 200){
      alert(res.status)
    }
    alert(res);
    return res.data
  }
  catch (err) {
    console.log(err);
    alert(err);
  }
}

其中 serverURL 是 http://127.0.0.1:8008

无法使用 Capacitor 发送 post 请求（在常规网页上工作正常）

Failed to send post request with Capacitor (works fine from regular webpage)

vue.js

ionic-framework

axios

capacitor