Redirect is not allowed for a preflight request

Question

I have this problem where i get the response when trying to use a rest api: "Access to fetch at 'https://kollektivet.app:8082/api/login/' from origin 'https://kollektivet.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."

Picture of response when trying to fetch

This happens when i try any of the rest api's I am using. From what i have read, this error means I am trying to re-direct, which I am not.

The backend is Django and looks like this:

    @csrf_exempt
@api_view(["POST"])
@permission_classes((AllowAny,))
def register(request,):
        password = request.data.get("password", "")
        email = request.data.get("email", "")
        if not email and not password and not email:
            return Response(
                data={
                    "message": "username, password and email is required to register a user"
                },
                status=status.HTTP_400_BAD_REQUEST
            )
        new_user = User.objects.create_user(
            email=email, password=password
        )
        return Response(status=status.HTTP_201_CREATED)

And the front-end is in react which looks like this:

createUser(event) {
        event.preventDefault();

        let data = {
            name: this.state.name,
            password: this.state.password,
            repeatPassword: this.state.repeatPassword,
            email: this.state.email
        };

        if (this.state.name !== '' && this.state.password !== '' && this.state.email !== '' && this.checkPasswords()) {
            console.log('name', this.state.name, 'password ', this.state.password, 'email ', this.state.email);
                fetch("https://kollektivet.app:8082/api/register/", {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    mode: "cors",
                    body: JSON.stringify(data)
                })
                    .then(response => response.json())
                    .then(data => console.log(data))
                    .catch(error => console.log(error));
            this.setState({message: "Du er nå registrert! For å aktivere din konto trykk på linken som vi har sendt til deg på epost"});
            this.setState({name: ""});
            this.setState({password: ""});
            this.setState({repeatPassword: ""});
            this.setState({email: ""});

        }
    }

I Do have this is the Django settings file:

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

I am running this on apache2 if this is relevant. The port 8082 is also closed. Does this need to be open when it is on the same server?

Thanks!

Answer 1

Just writing my story here in case anybody may have the same issue as mine.

Basically, this is a server end issue, so no need to change anything at the front end.

For this error message, it indicated that the OPTIONS requests got a response with the status code in either 301 Moved Permanently", "307 Temporary Redirect", or "308 Permanent Redirect".

Please check your requested URL with the 'location' attribute from the OPTIONS response, see if they are the same or not.

For me, the issue was my request URL is **"https://server.com/getdata"** but the URL I set on the server was **"https://server.com/getdata/"**

then the server give me an 308 to correct it with the '/', this works for POST, GET and HEAD, but not OPTIONS.

I'm using flask, flask_restful and the flask_cors.

use this will also solve this redirect issue for me.

app.url_map.strict_slashes = False

Answer 2

You're being redirected to site.site.comapi/register/

Do you have some other middleware that does this? Maybe in Apache config?

Note it's a 301 so your browser has cached this response and will now always redirect there even if your rove the code that resulted in this redirect, or even if you stop Django from running.

So you will need to also clear your redirect cache in the browser.

This is why I don't like 301 responses. 302 are much more polite.