While server rendering is functioning as expected with the proxy, a discrepancy arises when the request is made from the browser. In server-side rendering, the request goes to custom-server.com/v1/places, whereas in the browser it goes to current-domain.com/api/places.
Why does this issue occur only when requesting from the browser? Is the proxy functionality limited to the server side? Any assistance on resolving this would be highly appreciated.
Reviewing my NuxtJS configuration:
require('dotenv').config();
export default {
mode: 'universal',
buildModules: [],
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy',
['@nuxtjs/dotenv', { systemvars: true }],
],
axios: {
proxy: true,
credentials: true,
},
proxy: {
'/api': {
target: "http://custom-server.com",
pathRewrite: {
'^/api' : "/v1"
},
changeOrigin: true,
},
},
}
Examining my component:
<script>
export default {
data() {
return{
placesServer:false,
placesBrowser:false,
}
},
async asyncData ({ $axios }) {
// Server-side rendering works fine here
let response = await $axios.get("/api/places");
return {
placesServer:response.data,
};
},
created(){
if (process.browser){
// Issue occurs here =( when requesting from the browser
this.$axios.get("/api/places").then((response)=>{
this.placesBrowser = response.data;
});
}else{
// Works fine here! When not in the browser
this.$axios.get("/api/places").then((response)=>{
this.placesBrowser = response.data;
});
}
}
}
</script>