无法通过Capacitor发送帖子请求(从常规网页可以正常工作)

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有关(因为它们在浏览器中运行得很好(，但我不明白我应该在哪里定义它们。

服务器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的URL：http://127.0.0.1:8008(在我的案例中(。

我不知道为什么电容器不接受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