CODEWITHSUNDEEP
corsaxios
Martyn Ball
Martyn Ball

Reputation: 4885

CORS issue with an API

im running 2 docker containers for some local testing. One is an API at websites.click, the other is webplanner.click:8081.

I'm attempting to request some data from my endpoint at websites.click/api/cache/clear-all, however im getting the following error:

Access to XMLHttpRequest at 'http://websites.click/api/cache/clear-all' from origin 'http://webplanner.click:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I'm requesting the data using Axios as follows:

window.axios.get('//websites.click/api/cache/clear-all', {

}).then(response => {
    console.log(response);
})

Now i'm assuming the issue is within my htaccess as the error mentions preflight redirect. This is the htaccess within websites.click/api/

RewriteEngine On
RewriteBase /api

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?request=$1 [QSA,NC,L]

Options All +Indexes
allow from all

I have also added the following to my /api/index.php which contains the Routes.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

Edit 1:

Made the recommended changes by removing the headers wet within the ajax request, still getting the same error:

Access to XMLHttpRequest at 'http://websites.click/api/cache/clear-all/' from origin 'http://webplanner.click:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

This is the request within the XHR tab:

Request URL: http://websites.click/api/cache/clear-all/
Accept: application/json, text/plain, */*
Referer: http://webplanner.click:8081/admin/cache
X-Requested-With: XMLHttpRequest
X-Socket-Id: 126436.7368245

Upvotes: 0

Views: 2237

Answers (1)

Quentin
Quentin

Reputation: 943108

Read the error message carefully:

Redirect is not allowed for a preflight request.

So something on your server is causing it to respond to the OPTIONS request with a redirect.

You need to find out what and stop it.

Quite possibly it the common Apache HTTPD redirect from //websites.click/api/cache/clear-all to //websites.click/api/cache/clear-all/, which in case you need to change the URL in the JavaScript to the correct one in the first place.

What's more…

'Access-Control-Allow-Origin': '*', is a response header. It would be utterly stupid for client-side JavaScript to be able to set a header to give itself permission that it doesn't have by default. Get rid of that.

'Content-Type': 'application/json', — You're making a GET request. There is no content in the request body to describe the type of. Get rid of it!

… and setting non-standard headers and setting the Content-Type to one that isn't in a short list that doesn't include JSON are both things that trigger a preflight request in the first place … so if you didn't have that nonsense you wouldn't be making a preflight and you wouldn't have this problem in the first place.

Upvotes: 1

Related Questions