javascript - 使用 axios 和 express 时的 'Access-Control-Allow-Origin'

Question

我有一个 start_express.js 文件，我用 node 运行它:

const express = require("express"); 

const app           = express(),  
      DEFAULT_PORT  = 5000

app.set("port", process.env.PORT || DEFAULT_PORT);
app.get("/whatever", function (req, res) {
    res.send("It works!");
    console.log("Something's wrong");
});

var server = app.listen(app.get("port"));

我是我的 React 应用程序，我有一个 handleSubmit 方法试图获得该响应:

handleSubmit(event) {
    axios.get('http://127.0.0.1:5000/whatever')
      .then(function (response) {
        alert(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
}

当我点击提交时，start_express 服务器打印“出了点问题”，但客户端上的警报从未起作用。它给了我以下错误:

Failed to load http://127.0.0.1:5000/whatever: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

如果我无法响应，我该如何发送来自客户端的请求？

Answer 1

是的令人困惑。但是正如错误消息所说，您需要在服务器上设置访问控制 header 。客户端部分很好。使用 express 最简单的方法可能是使用 cors 包:

$ npm install cors

这样您将允许所有访问 - 您可能只想进行测试:

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

const app           = express(),  
      DEFAULT_PORT  = 5000

app.use(cors());

...

在这里查看不错的文档:https://github.com/expressjs/cors