在 Nuxt.js 中 CORS 阻塞客户端请求

问题描述

我在提出客户请求时遇到问题.

I am having issues when making a client request.

我遵循了 Nuxt.js 和 Axios 但我似乎仍然无法让它工作.也许我错过了什么..

I have followed the documentation on Nuxt.js and Axios but I still can't seem to get it working. Maybe I am missing something..

我的 Vue 组件调用 vuex 操作:

My Vue component calling the vuex action:

methods: {
  open() {
    this.$store.dispatch('events/getEventAlbum');
  }
}

vuex 中的动作:

export const actions = {
  async getEventAlbum(store) {
    console.log('album action');
    const response = await Axios.get(url + '/photos?&sign=' +   isSigned + '&photo-host=' + photoHost);
    store.commit('storeEventAlbum', response.data.results);
  }
};

还有我的nuxt.js.config

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],

axios: {
  proxy: true
},

proxy: {
  '/api/': {
    target: 'https://api.example.com/',
    pathRewrite: { '^/api/': '' }
  }
}

有人可以帮忙吗?

推荐答案

我相信@andrew1325 试图指出的问题是 API 提供者 需要启用 CORS，而不仅仅是您的服务器，无需更改代理中的标头，您将传递相同的标头，这目前会阻止访问.

I believe the issue that @andrew1325 is trying to point out is that the API provider needs to have the CORS enabled, not just your server, without changing the headers in your proxy, you're passing the same headers, which at the moment prevent access.

在我看来你只是缺少 changeOrigin

请尝试以下配置:

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],

axios: {
  proxy: true
},

proxy: {
  '/api/': { target: 'https://api.example.com/', pathRewrite: {'^/api/': ''}, changeOrigin: true }
}

还要确保您的前端 API url 指向您的代理请求 /api

also make sure that your front-end API url is pointing to your proxied request /api

这篇关于在 Nuxt.js 中 CORS 阻塞客户端请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！