CORS阻止Nuxt.js中的客户端请求

问题描述

提出客户请求时遇到问题。

I am having issues when making a client request.

我遵循了和，但我似乎仍然无法正常运行。

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操作：

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

It seems to me that you're only missing 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

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