Vue Axios CORS policy: No 'Access-Control-Allow-Origin' : <p>I build an app use vue and codeigniter, but I have a problem when I try to get api, I got this error on console</p>

<pre><code>Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-origin is not allowed 
by Access-Control-Allow-Headers in preflight response.
</code></pre>

<p>I have been try like this on front-end (main.js)</p>

<pre><code>axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
</code></pre>

<p>and this on backend (controller)</p>

<pre><code>header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
</code></pre>

<p>and vue login method</p>

<pre><code>this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res =&gt; {
        console.log(res);
      }).catch(err =&gt; {
        console.log(err.response);
      });
</code></pre>

<p>I've searched and tried in stackoverflow but does not work, how I can solve it? thank you so much for your help</p>
