React 应用程序无法从 API 网关获取响应

Question

尝试我的第一个 React 应用程序。 我在调用 API 网关端点时收到错误： 当我使用 Postman 、浏览器和 Python 脚本时，Endpoint 可以工作

Error fetching session ID: Error: Failed to fetch

function App() {
  const [faceLivenessAnalysis, setFaceLivenessAnalysis] = React.useState(null)
  const [sessionId,setSessionId] = React.useState(null)
  const [loading,setLoading] = React.useState(null)

  useEffect(() => {
    const fetchCreateLiveness = async () => {
        try {
             const response = await fetch('https://xxxx-api.us-east-1.amazonaws.com/dev', {
              mode: 'no-cors'
          });
            if (!response.ok) {
                throw new Error('Failed to fetch');
            }
            const data = await response.json();
            const mockresponse= { sessionId:data.sessionId}
            setSessionId(mockresponse);
            setLoading(false);
            console.log('session:', data.sessionId);
        } catch (error) {
            console.error('Error fetching session ID:', error);
            setLoading(false);
        }
    };

    fetchCreateLiveness();
  }, []);

Answer 1

问题似乎是您的获取的第二个参数，{mode：“no-cors”}。

当您在本地开发环境中运行 React 应用程序时，

跨源请求 (CORS) 通常会导致问题。

我在示例域 https://xxxx-api.us-east-1.amazonaws.com/dev 中遇到了“DNS 探测不可能”错误，因此我改用 PotterDB，这是一个不支持 DNS 探测的 API需要下面示例中的任何键。

看这个：

import React from "react"
import { useState, useEffect } from "react"

export default function App() {
  const [faceLivenessAnalysis, setFaceLivenessAnalysis] = React.useState(null)
  const [sessionId,setSessionId] = React.useState(null)
  const [loading,setLoading] = React.useState(null)

  useEffect(() => {
    const fetchCreateLiveness = async () => {
        try {
             const response = await fetch('https://wizard-world-api.herokuapp.com/Spells', {
              mode: 'cors'
              // contrast mode: 'no-cors'
          });
            if (!response.ok) {
                throw new Error('Failed to fetch');
            }
            const data = await response.json();
            console.log(data)
            // const mockresponse= { sessionId:data.sessionId}
            // setSessionId(mockresponse);
            // setLoading(false);
            // console.log('session:', data.sessionId);
        } catch (error) {
            console.error('Error fetching session ID:', error);
            setLoading(false);
        }
    };

    fetchCreateLiveness();
  }, [])}

当我使用

{mode: "no-cors"}

时，我得到 “获取会话 ID 时出错：错误：无法在 fetchCreateLiveness 中获取 (App1.jsx:17:1)”，即您看到的错误。