调整了 Create-React-App 中的代理设置以绕过 CORS 阻塞错误，现在得到未定义的响应

Question

在为 CORS 阻止 Create-React-App 中的请求添加解决方法后，我遇到了问题。

按照建议，我已将代理设置更新到我在 package.json 中尝试调用的同一域（带有虚拟数据的示例）

"proxy": "https://jsonplaceholder.typicode.com"

并按如下方式在我的 App.js 文件中进行调用..

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

function App() {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch("/posts/")
      .then((res) => {
        console.log(res.data);
      })
      .then((res) => setProducts(res.data));
  });
  return <div className="App">Returned here</div>;
}

export default App;

我没有再收到 CORS 错误，这很好，但是我确实收到了以下错误消息

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined

在 postman 中测试了 API 并且它都正确返回，所以不确定问题出在哪里。

如有任何帮助，我们将不胜感激

Answer 1

代码沙箱似乎没有开箱即用 create-react-app。

查看代码：

    fetch("/posts/")
      .then((res) => {
        console.log(res.data);
      })
      .then((res) => setProducts(res.data));

应该调整为

  useEffect(() => {
    fetch("/posts")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setProducts(data);
      });
  }, []);

调整了 Create-React-App 中的代理设置以绕过 CORS 阻塞错误，现在得到未定义的响应

Adjusted proxy settings in Create-React-App to get around CORS blocking error and now get an undefined response

cors

reactjs

create-react-app

react-hooks