想跨域調(diào)用一個(gè)接口,按照官方文檔, 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': '' },
},
},調(diào)用部分代碼: 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)
}說(shuō)明配置確實(shí)被正確初始化了,問(wèn)題是只有刷新頁(yè)面進(jìn)行服務(wù)端渲染時(shí)才有這個(gè)日志,這時(shí)的path是頁(yè)面路由而不是api請(qǐng)求,而頁(yè)面上的請(qǐng)求卻沒(méi)有被代理。很奇怪,不知道是哪里配置有問(wèn)題,請(qǐng)各路大神幫忙。
@nuxtjs/axios 模塊如何配置跨域
胡子哥哥
2018-07-21 21:02:08