title: Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I'm trying to make a request to an ERP API and i get this response:</p>
  <p>Access to XMLHttpRequest at 'http://ip:8082/auth' from origin 'http://connector.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  <p>Although in my request there is a header Access-Control-Allow-Origin:</p>
  <pre><code>        getAuth() {
              axios.post('http://'+this.ip + '/auth/', {
                  headers: {
                      &quot;Content-Type&quot;: &quot;application/json&quot;,
                      &quot;Cookie&quot;: this.sessionid,
                      &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
                      &quot;Access-Control-Allow-Methods&quot;: &quot;GET, POST, PATCH, PUT, DELETE, OPTIONS&quot;,
                      &quot;Access-Control-Allow-Headers&quot;: &quot;Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length&quot;
                  }, 
                  data: {
                      username: this.username, 
                      password: this.password
                  }
              }).then(response =&gt; {
                  this.getItems();
              })
          },
  </code></pre>
  <p>Cors.php</p>
  <pre><code>'paths' =&gt; ['*'],
  
  'allowed_methods' =&gt; ['*'],
  
  'allowed_origins' =&gt; ['*'],
  
  'allowed_origins_patterns' =&gt; [],
  
  'allowed_headers' =&gt; ['*'],
  
  'exposed_headers' =&gt; [],
  
  'max_age' =&gt; 0,
  
  'supports_credentials' =&gt; true,
  </code></pre>
  <p>js/bootstrap.js</p>
  <pre><code>window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
  window.axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE';
  </code></pre>
  <p>Added my own middleware</p>
  <p>Middleware/cors.php</p>
  <pre><code>  return $next($request)
          -&gt;header('Access-Control-Allow-Origin', '*')
          -&gt;header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
            OPTIONS');
  </code></pre>
  <p>Added it to kernel.php $routeMiddleware then web.php</p>
  <pre><code>Route::get('/', [App\Http\Controllers\MainController::class, 'index'])-&gt;middleware(Cors::class);
  </code></pre>
  <p>Request Headers</p>
  <pre><code>Request URL: http://ip:8082/auth
  Referrer Policy: strict-origin-when-cross-origin
  Provisional headers are shown
  Accept: application/json, text/plain, */*
  Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
  Access-Control-Allow-Origin: *
  Content-Type: application/json;charset=UTF-8
  Referer: http://connector.test/
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
  X-Requested-With: XMLHttpRequest
  </code></pre>
  <p>Doing the request on backend with PHP Curl works fine, but i want to make it work in front-end with Vue.</p>