title: XMLHttpRequest blocked by CORS Policy on axios.post
body: <p>The <code>axios.post</code> (code below) must send data to url <code>api/add-todo</code>, but I get these errors:</p>
  
  <p><a href="https://i.stack.imgur.com/ARB1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARB1m.png" alt="enter image description here"></a></p>
  
  <pre><code>  axios.post('http://localhost/vueoctober/todo/api/add-todo', todo).then(function (response) {
      console.log(response);
    }).catch(function(error) {
      console.log(error);
    });
  </code></pre>
  
  <p>The route <code>api/add-todo</code> is handled with October method <code>Route::get()</code> (<a href="https://octobercms.com/docs/services/router" rel="nofollow noreferrer">https://octobercms.com/docs/services/router</a>). Why is it not found?</p>
  
  <p>If I change <code>axios.post</code> to <code>axios.get</code> it will be working! But I need post data, not get.</p>
  
  <p><strong>What I tried:</strong></p>
  
  <p>1) I tried to add these headers to .htaccess:</p>
  
  <pre><code>Header add Access-Control-Allow-Origin "*"
  Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
  Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTION"
  </code></pre>
  
  <p>It's working only for <code>axios.get</code>. The <code>axios.post</code> is still blocking.</p>
  
  <p>2) I added <code>Header set Access-Control-Allow-Origin "*"</code> to httpd.conf.</p>
  
  <p>Vue app is serving at port 8080, therefore axios.post url can't be <strong>relative</strong>.</p>