离子 ios 在执行 REST 调用时发出白页 [英] ionic ios issue white page when doing REST Calls

问题描述

我有一个 ionic react 应用程序，可以从 rest API 获取数据.当我将 ab 与 ionic 服务器或 Android 捆绑在一起时，该应用程序运行良好.当我在 iOS 上运行相同的代码时，我得到了一个空白页面.之前的一些版本也适用于 iOS.当我重新设置 5 天前版本的代码时，它根本不起作用.

I've got an ionic react app which fetches data from a rest API. When I bundle the ab with ionic server or on Android the app works fine. When I run the same code on iOS I got a blank page. Some Versions before it worked on iOS as well. When I rebase my code the version 5 days ago now it doesn't work at all.

代码如下:

export default function PostsContainer() {
    let {categoryid} = useParams<any>();
    const [posts, setPosts] = useState<any[]>([]);
    const [page, setPage] = useState<number>(1);
    const [totPages, setTotPages] = useState<number>(1);
    const [title, setTitle] = useState<string>("Recent posts");
    const baseUrl = BASE_URL + "wp-json/wp/v2";
    const [loadingPosts, setLoadingPosts] = useState<boolean>(false);

    useEffect(() => {
        async function loadPosts() {
            setLoadingPosts(false)
            let url = baseUrl + "/posts?status=publish&page=" + page;
            if (categoryid !== undefined) {
                url = url + "&categories=" + categoryid;
                getCategoryName(categoryid);
            }
            const response = await fetch(url);
            if (!response.ok) {
                return;
            }
            const totalPages = await response.headers.get("x-wp-totalpages");
            const postsTemp = await response.json();
            setPosts(postsTemp);
            setTotPages(Number(totalPages));
            setLoadingPosts(true);
            console.log(posts)
        }

        loadPosts();
    }, [page, categoryid]);
    
    function handleClickNextPage() {
        setPage(page + 1);
    }

    async function getCategoryName(id: number) {
        let url = baseUrl + "/categories/" + id;

        const response = await fetch(url);
        if (!response.ok) {
            return;
        }
        const category = await response.json();
        setTitle(category.name);
    }

    if (loadingPosts) {
        return (
            <IonPage>
                <IonHeader translucent={true}>
                </IonHeader>
                <IonContent>
                    {page === 1 ? <Slider listOfPosts={posts}/> : <div/>}
                    <Posts
                        listOfPosts={posts}
                        totPages={totPages}
                        handleClickNextPage={handleClickNextPage}
                        pageNumber={page}
                    />
                </IonContent>
            </IonPage>
        );

    } else {
        return <IonLoading
            isOpen={!loadingPosts}
            message={ION_LOADING_DIALOG}
            duration={ION_LOADING_DURATION}
        />
    }
}

是否有属于rest api的任何设置?调用是针对带有 https 的 URL.当我删除 useefect 并仅呈现没有内容的静态页面时，它工作正常.

are there any settings belonging to the rest api? The call is to a URL with https. When I remove the useefect and only render a static page without content, it works fine.

推荐答案

最后是 Endpoint 上的 CORS 错误.我必须在 Endpoint 上允许 cordova://localhost.

At the End it was a CORS error on Endpoint. I had to allow cordova://localhost on Endpoint.

这篇关于离子 ios 在执行 REST 调用时发出白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！