想跨域調用一個接口,按照官方文檔, nuxt.config.js中配置如下: modules: ['@nuxtjs/axios'], axios: { proxy: true, baseURL: 'http://localhost:8000/api', // prefix: '/api', // it not work
credentials: true,
}, proxy: { '/api/douban': { target: 'https://api.douban.com/v2/book/search', changeOrigin: true, pathRewrite: { '^/api': '' },
},
},調用部分代碼: async search({ commit, state }, data) { const res = await this.$axios.$get('/douban/book/search', { params: data });
commit('SET_BOOK_QUERY', res); return res;
},但是不起作用,在http-proxy-middleware包中增加如下日志: function shouldProxy (context, req) { var path = (req.originalUrl || req.url) console.log('shouldProxy path:', context, path);// 輸出:shouldProxy path: /api/douban /admin/tag
return contextMatcher.match(context, path, req)
}說明配置確實被正確初始化了,問題是只有刷新頁面進行服務端渲染時才有這個日志,這時的path是頁面路由而不是api請求,而頁面上的請求卻沒有被代理。很奇怪,不知道是哪里配置有問題,請各路大神幫忙。
@nuxtjs/axios 模塊如何配置跨域
胡子哥哥
2018-07-21 21:02:08