CORS error when accessing the API on Laravel 7

I wrote a simple API for a home project and uploaded it under the domain api.anaxita.ru , but the following problem occurred after uploading to the hosting.

I make a fetch request from localhost to the remote API on Laravel 7, which accepts the token and returns the collection in json:

fetch(`http://api.anaxita.ru/api/products`, {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer wrSWsPWD8Cs8I7oUnoePAbs2u8MutkSXbmo8Kk4P',
      'Content-Type': 'application/json'
    },
  })
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log('Request successful', data);
    return data;
  })
  .catch(function(error) {
    console.log('Request failed', error)
  })

I get the following response in the browser: CORS error

Going to network, I see that the browser has sent 2 requests (or tried to send): requests errors

In the first request (failed), the following headers are:

Response  headers:

Provisional headers are shown
Authorization: Bearer wrSWsPWD8Cs8I7oUnoePAbs2u8MutkSXbmo8Kk4P
Content-Type: application/json
Referer: http://fatapp/views/registration/sign-up.php
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

The second request has the following headers:

Request headers:

Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: GET
Connection: keep-alive
Host: api.anaxita.ru
Origin: http://fatapp
Referer: http://fatapp/views/registration/sign-up.php
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Response headers:

Allow
Connection: Keep-Alive
Content-Length: 224
Content-Type: text/html; charset=iso-8859-1
Date: Fri, 11 Sep 2020 13:07:13 GMT
Keep-Alive: timeout=2, max=100
Server: Apache/2

What I tried

  1. In the config/cors file.php has the following permissions

     return [
     'paths' => ['*'],
     'allowed_methods' => ['*'],
     'allowed_origins' => ['*'],
     'allowed_origins_patterns' => [],
     'allowed_headers' => ['*'],
     'exposed_headers' => [],
     'max_age' => 0,
     'supports_credentials' => false,
    

    ];

  2. I tried to create a separate global middleware and write the headers there

  3. I tried to add a file .htaccess and write the headings there

  4. Use http instead of https

  5. Use mode: no-corse{[6] in the request]}

Locally, requests pass between the front and the back pass correctly. Requests from POSTMAN pass successfully get the code 200.

I ask for your advice.

The token specified in the request is valid and can be used for requests.

Author: aleksandr barakin, 2020-09-11

2 answers

CORS - this is to the service (http://api.anaxita.ru/api/products) or proxy through the back server.

CORS is a technology of modern browsers that allows you to grant a web page access to resources of another domain. It is an alternative to JSONP, which was until some time the main way to overcome the restrictions imposed in the domain restriction rule on XSS requests, overcoming the irremediable restriction of JSONP - the inability to receive data by the POST method.

The technology itself is quite simple. There are three domains that want to download resources from the Z server. To make this possible, the web server Z, which returns the content, just specify in the response header Access-Control-Allow-Origin

 1
Author: Aziz Umarov, 2020-09-11 14:00:59

The problem was solved by moving to a new hosting service. The previous hosting did not allow OPTIONS headers and did not allow them to be resolved manually.

 0
Author: Anaxita, 2020-09-12 19:57:59