Nuxt.js에서의 CORS 차단 클라이언트 요구

Nuxt.js에서의 CORS 차단 클라이언트 요구

고객 요청 시 문제가 발생하였습니다.

Nuxt.js와 Axios에 대한 문서를 확인했지만 아직 제대로 작동하지 않는 것 같습니다.내가 뭔가 놓친 것 같아..

vuex 작업을 호출하는 My Vue 구성 요소:

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를 활성화해야 한다는 것입니다.프록시의 헤더를 변경하지 않고 동일한 헤더를 전달하고 있기 때문에 현재는 액세스가 금지되어 있습니다.

내가 보기엔 넌 그저 실종자일 뿐이야changeOrigin

다음 구성을 시도해 보십시오.

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

axios: {
  proxy: true
},

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

또한 프런트 엔드 API URL이 프록시 요청을 가리키고 있는지 확인합니다./api

언급URL : https://stackoverflow.com/questions/55445196/cors-blocking-client-request-in-nuxt-js