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

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.

Answer 2

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 3

I had the same problem until I discovered that the redirect was caused by the Django internationalization framework, where all urls get a i18n url extension such as /en/path_to_resource when actually path_to_resource was requested. The internationalization framework achieves this through a 302 redirect.

The solution to this problem is to keep the rest-api urls outside the section with the i18n_patterns. The resulting urls.py might then look like

urlpatterns = [
    path('i18n/', include('django.conf.urls.i18n')),
    path('rest/', include(('rest.urls', 'rest'), namespace='rest')),
]

urlpatterns += i18n_patterns(
    path('admin/', admin.site.urls),
    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    path('my_app/', include(('my_app.urls', 'my_app'), namespace='my_app')),
)

Answer 4

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
"corsheaders.middleware.CorsMiddleware",
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

In settings.py, if I arrange my MIDDLEWARE array like this, it will work fine. But if I move CorsMiddleware to the last line, that error will occur