Политика Vue Axios CORS: нет «Access-Control-Allow-Origin»

Question

Я создаю приложение, использующее vue и codeigniter, но у меня возникает проблема, когда я пытаюсь получить API, я получаю эту ошибку на консоли

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.

Я пробовал вот так на интерфейс (main.js)

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

и это на бэкэнде (контроллере)

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

и методе vue login

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 => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

Я искал и пробовал в stackoverflowно не работает, как я могу это решить?Большое спасибо за вашу помощь

Answer 1

CORS - это сервер, который сообщает клиенту, какие HTTP-запросы ему разрешено делать.Каждый раз, когда вы видите заголовок Access-Control-Allow-*, он должен отправляться сервером, а НЕ клиентом.Сервер «позволяет» клиенту отправлять определенные заголовки.Клиенту не имеет смысла давать себе разрешение.Поэтому удалите эти заголовки из кода внешнего интерфейса.

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          // remove headers
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

Например, представьте, что ваш бэкэнд установил этот заголовок cors.

header("Access-Control-Allow-Methods: GET");

Это означает, что клиенту из другого источника разрешено отправлять только запросы GET, поэтому axios.get будет работать, axios.post не удастся, axios.delete не удастся и т. Д.