Как исправить проблему vue axios CORS?

#vue.js

Вопрос:

Как я могу предотвратить проблему CORS с vue axios?

Ниже приведен код для выполнения запросов с помощью серверной части с использованием vue и axios.

 axios.config.js

/// here I'm creating a vue axios instance.

import axios from "axios";

export default axios.create({
  baseURL: "https://example.com/api/v1/",
  headers: {
    Accept: "application/json",
    Authorization: "TOKEN 3413413dfdsfsafd3rr41",
  },

});

и внутри vue.config.js

Я проксировал запрос.

 module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8081",
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

и внутри моего хранилища vuex я вызываю действие:

 import axios from 'axios.config'

  actions: {
    getData({ commit }) {
      axios
        .get(`products/grocery`)
        .then((res) => {
          console.log("res :", res);
          commit("SET_DATA", res.data);
        })
        .catch((e) => {
          console.log("e :", e);
          commit("SET_ERROR", e);
        });
    },
}

Но когда я смотрю на запрос в консоли, я вижу, что он отправляет запрос на исходный URL https://example.com/api/v1/ -адрес, а не добавляет строку сервера разработки this: http://localhost:8081/api/v1/

Не уверен, почему проксирование не работает!

1. Это не мой сервер (это серверная часть клиентов). Я не уверен в серверной технологии. Но все же это должно работать правильно ..? Я имею в виду проксирование запроса (независимо от того, что такое серверная часть)

Ответ №1:

Внешние URL-адреса не проксируются. Измените базовый URL в axios на /api/v1/

 export default axios.create({
  baseURL: "/api/v1/",
  headers: {
    Accept: "application/json",
    Authorization: "TOKEN 3413413dfdsfsafd3rr41",
  },
});

1. ОК. тогда я получаю следующую ошибку 431 (Request Header Fields Too Large)

2. Проверьте отправляемые заголовки запросов. Это должно помочь в определении проблемы.

3. Это то же самое: headers: { Accept: "application/json", Authorization: "TOKEN 3413413dfdsfsafd3rr41", }

Ответ №2:

Nuxt предоставляет опцию прокси, которую вы можете использовать, чтобы избежать ошибок cors, Документация Nuxt

Вы можете обратиться к этому для получения дополнительной информации и доступных опций @nuxt / proxy