Question

我使用Express for webserver，并使用isomorphic-fetch模块从客户端使用XHR。

我的网络应用程序有三台服务器：

端口3000 - ＆gt;管理员网站
端口3001 - ＆gt;公共网站
端口3002 - ＆gt; API服务器

API服务器具有名为＆＃34;技能＆＃34;的资源。有一些数据，并得到这样的：

GET http://mydomain:3002/skills

它返回JSON数据。

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

Fetch API无法加载http://example.me:3002/skills。从＆＃39; http://example.me:3002/skills＆＃39;重定向到＆＃39; http://example.me:3002/skills/＆＃39;已被CORS政策阻止：请求需要预检，不允许遵循跨源重定向。

我不明白为什么有重定向＆＃39;或者其他的东西。这是我的服务器端代码，我授予了所有与CORS相关的标题：

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路径。

无法获取：请求需要预检，不允许遵循跨源重定向

1 个答案: