javascript - 无法获取 : Request requires preflight,，不允许遵循跨域重定向

Question

我使用 Express 作为网络服务器，并使用客户端的同构获取模块来使用 XHR。

我的 Web 应用程序有三台服务器:

• 端口 3000 -> 管理网站
• 端口 3001 -> 公共(public)网站
• 端口 3002 -> API 服务器

API Server 有名为“skills”的资源，其中包含一些数据，并按如下方式获取:

GET http://mydomain:3002/skills

它返回 JSON 数据。

但是当我从 3000/3001 请求 3002 时，它失败并显示以下消息:

Fetch API cannot load http://example.me:3002/skills. Redirect from 'http://example.me:3002/skills' to 'http://example.me:3002/skills/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

我不明白为什么会有“重定向”之类的东西。这是我的服务器端代码，我授予了所有 CORS 相关 header :

const express = require('express');
const app = express();

...

// CORS
app.use((req, res, next) => {
    var allowedOrigins = ['http://example.me', 'http://example.me:3000', 'http://example.me:3001', 'http://example.me:3002'];
    var origin = req.headers.origin;

    if(allowedOrigins.indexOf(origin) > -1){
        res.setHeader('Access-Control-Allow-Origin', origin);
    }

    res.setHeader('Access-Control-Allow-Credentials', true);
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');

    if (req.method === "OPTIONS") {
        return res.status(200).end();
    }

    next();
});

app.use(require('./routes'));

...

app.listen(3002, () => console.log(".API Server listening on port 3002..."));

这是使用 Fetch API 的客户端代码:

fetch('http://example.com:3002/skills', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    credentials: 'include',
    cache: 'no-store',
    mode: 'cors'
})...

如您所见，没有重定向代码。我花了将近一天的时间来解决这个问题，但是我尝试的一切都失败了，我找到的每条信息都没有用。

我认为将服务拆分为 API 服务器和 Web 服务器(实际上返回 HTML)是个好主意，并且希望采用这种方法。

有办法解决这个问题吗？任何建议将非常感激。

Answer 1

我几年前解决了这个问题，但仍然不明白为什么会发生。

但是我的解决方案很简单，将每个 API 放入/api 路径。