如何消除 Nuxt/SSR 中的 CORS 错误？

Question

因此，我使用 Nuxt/SSR 提出了一个简单的 api 请求。我有城市和类别。每个城市都有一个类别列表。要获取城市，我必须使用 https:///api/cities 并获取类别，我应该使用 https:///api/cities?id
store/cities.js

export const state = () => ({
  cities: [],
})

export const mutations = {
  setCities(state, cities) {
    state.cities = cities
  },
}

export const actions = {
  async fetch({ commit }) {
    const cities = await this.$axios.$get(
      'https://api/cities'
    )
    commit('setCities', cities)
  },
}

export const getters = {
  cities: (s) => s.cities,
}

它与这个index.vue完美配合：

export default Vue.extend({
  async fetch({ store }) {
    if (store.getters['cities/cities'].length === 0) {
      await store.dispatch('cities/fetch')
    }
  },

  computed: {
    cities() {
      return this.$store.getters['cities/cities']
    }
  }
})

但现在我想在点击时获取类别（选择城市 ID）：
store/categories.js

export const state = () => ({
  categories: [],
})

export const mutations = {
  setCategories(state, categories) {
    state.categories = categories
  },
}

export const actions = {
  async fetch({ commit }, cityId) {
    const categories = await this.$axios.$get(
      'https://api/cities?id=' + <data that I get on click>
    )
    commit('setCategories', categories)
  },
}

export const getters = {
  categories: (s) => s.categories,
}

现在index.vue：

export default Vue.extend({
  computed: {
    cityCategories() {
      return []
    },
  },
  methods: {
    // this function I call on click
    selectCity(selectedCityId) {
      this.$store.dispatch('categories/fetch', selectedCityId)
    }
  }

})

但在这之后我在点击时出现错误：

Cross-Origin 请求被阻止：同源策略不允许读取位于 https://api/cities?id 的远程资源。（原因：缺少 CORS header ‘Access-Control-Allow-Origin’）。状态码：200.

Cross-Origin 请求被阻止：同源策略不允许读取位于 https://api/cities?id 的远程资源。（原因：CORS请求没有成功）。状态码：(null).

我确定问题不在 api，因为我尝试使用第一种方法获取类别而不点击（只是将 id 编辑为 1）并且有效。我有相同的本地域，所以它与 api 中的 headers 无关。

Answer 1

CORS 肯定在 API。

设置 Access-Control-Allow-Origin header 来自 back-end 的响应。

Answer 2

它在点击时不起作用，因为它是来自 browser/localhost 的请求，而不是来自 nuxt 服务器的请求。所以我只是安装了nuxtjs代理首先在本地服务器上发送请求。

如何消除 Nuxt/SSR 中的 CORS 错误？

How to get rid of CORS error in Nuxt/SSR?

vue.js

server-side-rendering

vuex

nuxt.js