如何修复 react-app 中的 CORS 错误 "http://localhost:3000 is not allowed by Access-Control-Allow-Origin"？

Question

我确实找到了针对快速服务器的解决方法，但我无法在我的反应应用程序中实现相同的方法。

简称this。请建议。（我是 CORS 的初学者）

这是我的 App.js 文件：

import { useEffect, useState } from "react";
import "./App.css";

function App() {

  const APP_ID = "--"
  const APP_KEY = "--"

  const [counter, setCounter] = useState(0);

  useEffect(() => {
    getRecipes();
  }, [])

  const getRecipes = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`);
    const data = response.json();
    console.log(data);
  }

  return <div className="App">
    <form className="search-form">
      <input className="search-bar" type="text" placeholder="Search query here!" />
      <button
        className="search-button" type="submit">
        Search
      </button>
    </form>
    <h1 onClick={() => setCounter(counter + 1)}>{counter}</h1>
  </div>;
}

export default App;

Answer 1

对于生产和几乎所有用例，这需要在服务器上完成（即您正在使用的后端，通常运行 node.js，而不是反应的前端）。

然而，create-react-app 确实允许您在 client-side 上设置代理以在开发期间进行测试，尽管不推荐这样做，因为如果您在将代码发布到生产环境时忘记删除它，这可能是一个严重的安全问题。如果它只是一个学习项目，你可以这样做：

如果这是你的API：http://123.4.345.53:7000/api/profile/ 将此部分添加到您的 package.json 文件中："proxy": "http://123.4.345.53:7000/" 然后您可以执行以下操作：

React.useEffect(() => {
axios
    .get('api/profile/')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    }); 
});

如果您决定使用专用后端，并且它运行 node.js，请按如下方式完成：

var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

如何修复 react-app 中的 CORS 错误 "http://localhost:3000 is not allowed by Access-Control-Allow-Origin"？

How to fix CORS error "http://localhost:3000 is not allowed by Access-Control-Allow-Origin" in a react-app?

reactjs

cors

fetch

use-effect

access-control