Currently, I am utilizing @nuxtjs/proxy for making proxy requests. The setup in nuxt.config.js is working perfectly fine.
nuxt.config.js
proxy: {
'/api/': {
target: 'api.example.com',
headers: {
'origin': 'www.example.com',
// ...
},
pathRewrite: {
'^/api/': ''
}
},
}
// ...
However, my goal now is to have the origin be dynamic and depend on the current domain. To test this, I removed the header from nuxt.config.js and created a plugin instead where I initially hardcoded the same origin as before.
plugins/origin.js
export default function (ctx) {
ctx.$axios.onRequest(config => {
config.headers['origin'] = 'www.example.com';
return config;
}, err => console.log(err));
}
Unfortunately, this approach did not work as expected. The API log indicated that the origin needed to be set, which is what I thought I had done correctly. My only theory at this point is that perhaps the headers are not being transferred properly during the proxy request process.
Update
It's important to note that I am performing server-side rendering and have added the plugin within nuxt.config.js like so:
plugins: [
'~/plugins/origin.js'
]