'Why I'm getting "PreflightDisallowedRedirect" when fetching URL on ReactJS untill I add a trailing slash, and only for this URL?

I'm working on a React App, that fetchs data from api wrote with php. The api folder's structure is like this:

api/
  |
  |---.htaccess
  |---news/
  |    |
  |    |---news.php
  |---tenders/
       |
       |---tenders.php

The .htaccess file was created to "beautify" the fetching urls

RewriteRule ^news/?$ news/news.php
RewriteRule ^tenders/?$ tenders/tenders.php

As you can see, both rewriting rules are written in the same way.

When fetching tenders api on development environment, it works well, but, does not work when fetching news.

React fetching Code:

        return fetch('https://website.tld/api/news', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        return fetch('https://website.tld/api/tenders', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })

Again, the URL are written the same way, but I receive the following error only for news URL

Access to fetch at 'https://website.tld/api/news' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

But, I noticed that the fetching works when adding a trailing slash:

https://website.tld/api/news/

I don't understand why I have to add the trailing slash only for this URL. In other side, the news api works on production without trailing slash.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source