Failed to fetch: Request requires preflight, which is disallowed to follow cross-origin redirect

Question

I'm using Express for webserver, and using isomorphic-fetch module from client to using XHR.

I have three servers for my web application:

Port 3000 -> Admin Website
Port 3001 -> Public Website
Port 3002 -> API Server

API Server has resources named "skills" which has some data, and get it like this:

GET http://mydomain:3002/skills

it returns JSON data.

But when I request to 3002 from 3000/3001, it fails with this message:

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.

I don't get it why there is 'redirection' or something. This is my server side code, I granted all CORS related headers:

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..."));

And this is client side code that using 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'
})...

As you can see there is no redirection code. I spent almost a day to fix this issue, but everything I tried was all failed, every information that I found was useless.

I think splitting services to API Server and Web Server(actually returns HTML) was good idea, and want to go with this approach.

Is there a way to fix this problem? Any advice will very appreciate.

@Quentin I don't remember actually why, I think I just saw somewhere when I was finding some fetch API informations. I just removed that header. Anyway that doesn't matter, still not work. — modernator, Jan 02 '17 at 14:47
@Hosar Yes, of course. I allowed three of them all. You can check this on the server side code, cors middleware part. — modernator, Jan 02 '17 at 14:48
See the answer at http://stackoverflow.com/questions/34949492/cors-request-with-preflight-and-redirect-disallowed-workarounds/39728229#39728229 for details of how to work around this. Also as noted there, this restriction on redirects is no longer in the spec but browsers need to update their implementations to match the spec change. — sideshowbarker, Jan 18 '17 at 10:40

score 0 · Accepted Answer · answered Oct 25 '18 at 05:33

0

I solved this issue few years ago, still don't get it why it happened.

However my solution was simple, put every API into /api path.

answered Oct 25 '18 at 05:33

modernator

4,341
12
47
76

Failed to fetch: Request requires preflight, which is disallowed to follow cross-origin redirect

1 Answers1