CORS 问题：我的应用程序中的 npm cors 模块是否正确格式化了“Access-Control-Allow-Origin”字段？

Question

我正在尝试设置 React 前端以将 Axios 请求发送到 Express 后端。 localhost:3000 包含我的 React 应用程序，而 localhost:3001 包含我的 Express 应用程序。 我在 React 端执行 Axios 请求如下：

axios.get('localhost:3001/')

但是，我收到以下错误。

Access to XMLHttpRequest at 'localhost:3001/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我已将 npm cors 模块导入我的 Express 后端，并按如下方式使用它：

var cors = require('cors');
var app = express();
app.use(cors());

但是，我的 React 应用程序仍然遇到相同的 CORS 问题。

我通过 console.logging res 检查 res 对象到终端，看到 cors() 正在修改 http 标头，如下所示：

...
 [Symbol(isCorked)]: false,
  [Symbol(outHeadersKey)]:
   [Object: null prototype] {
     'x-powered-by': [ 'X-Powered-By', 'Express' ],
     'access-control-allow-origin': [ 'Access-Control-Allow-Origin', '*' ] } }

access-control-allow-origin 是否应该采用列表值？ 最终，我希望解决我的 React CORS 问题，并且想知道这是否是预期行为。

Answer 1

axios.get('localhost:3001/')

您正在尝试使用通信方案localhost向名为3001的服务器发出请求。

你可能想要axios.get('http://localhost:3001/')