web-dev-qa-db-ja.com

CORSはNUXT.JSでクライアント要求をブロックします

クライアントの要求をするときに問題があります。

私は NUXT.js および Axios のマニュアルに従ってきました - /しかし私はまだそれを働くように思われることはできません。多分私は何かが足りない..

My Vueコンポーネント] vuexアクション：

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

action in 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);
  }
};
 _

そしてmynuxt.js.config

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

axios: {
  proxy: true
},

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

誰かが助けることができる人ですか？

vuejs2corsvuexnuxt.js
5
Manu

@ andrew1325が指摘しようとしている問題は、API Provider =あなたのプロキシのヘッダーを変更することなく、サーバーだけでなく、CORSを有効にしておく必要があると考えています。現時点でアクセスを防ぐヘッダー。

changeOriginだけ欠けているだけだと思います

次の設定を試してください。

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

axios: {
  proxy: true
},

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

また、フロントエンドAPI URLがプロキシリクエストを指していることを確認してください/api

1
Daniel