调用 3rd 方 API 时最好的 CORS 解决方案是什么？

Question

我正在使用 Axios 作为我的 HTTP 客户端来调用第 3 方 API。 Express 用于我的服务器和 cors 包，通过更改 HTTP headers 来修复 CORS 问题。但是错误Failed to load https://api.abalin.net/namedays?day=25&month=11: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.总是出现。

尽管使用 server.options("*", cors());，但我尝试通过使用 cors 包添加配置选项以及此 website. Lastly, I did set the origin to http://http://localhost:3000/ 推荐的基本配置来手动配置 header。

Server.js

const express = require("express");
const next = require("next");
const cors = require("cors");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.options("*", cors());

    server.get("*", (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, err => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

Abalin.js

class Abalin extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    Axios.get("https://api.abalin.net/namedays?day=25&month=11").then(res => {
      console.log(res);
    });
  }

  render() {
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

export default Abalin;

感谢您调查这个问题。我感谢你的时间和努力。

Answer 1

使用您的服务器代理 API，定义将调用 API 服务器端的路由。然后设置cors让你的前端调用它。

调用 3rd 方 API 时最好的 CORS 解决方案是什么？

What's the best CORS solution when calling 3rd party APIs?

reactjs

express

cors

axios

next.js