UNDERSTANDING AXIOS PROXY AND GETTING IT TO WORK WITH NUXT.JS
The proxy settings can be quite confusing when trying make axios requests in Nuxt. I am writing this article to try and clarify how it works.
Test the proxy works with a public API
The axios config in nuxt.config.js
// Axios module configuration:
// https://go.nuxtjs.dev/config-axios
axios: {
// WARNING: proxy doesn't work with nuxt generate,
// have to use a prefix and set an API_URL
proxy: true,
}
The proxy config
proxy: {
'/api/': {
target: 'https://jsonplaceholder.typicode.com/',
pathRewrite: { '^/api/': '/posts/1' }
},
}
Make a simple axios get request inside your app
this.$axios
.get("/api/")
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});
The console log should be as follows:
Proxy created: /api/ -> https://jsonplaceholder.typicode.com/
Proxy rewrite rule created: "^/api/" ~> "/posts/1"
You can see the proxy rewrites the path /api/
into /posts/1
and appends it to our target url. So the final request would return the results for https://jsonplaceholder.typicode.com/posts/1
Axios Proxy will not work with Nuxt Generate in static mode
The proxy settings don't work with static mode, so we can skip using the proxy all together and just configure a prefix which would be the root endpoint of our API.
baseUrl, prefix & API_URL
baseUrl
Defines the base URL which is used and prepended to make server side requests.
Environment variable API_URL
can be used to override baseURL
.
WARNING: baseURL
and proxy
cannot be used at the same time, so when the proxy
option is in use, you need to define prefix
instead of baseURL
.
In nuxt.config.js
// Axios module configuration:
// https://go.nuxtjs.dev/config-axios
axios: {
// WARNING: proxy doesn't work with nuxt generate,
// have to use a prefix and set an API_URL
proxy: false,
prefix: process.env.API_URL
}
In your .env file
API_URL=https://jsonplaceholder.typicode.com/
Now all of our requests will start with that string and the endpoint will just be added to the end of the URL. We need to make sure we use the correct endpoints though, this time we would be calling /posts/1
not /api
because there is no path rewrite from the proxy module.
The request without a proxy would look like this
this.$axios
.get("/posts/1")
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});
The only caveat really with this, is that we can only have one API_URL. So all of our requests need to be made to a single API.
If you want to work with multiple API's fetching data then you can handle these requests server side. For example using a node serverless function that's basically an express api that returns the data we need.
CONTINUE READING
IT'S TIME TO LEAVE WEBPACK BEHIND - MODERN BUNDLERS ARE HERE
In the ever-evolving landscape of web development, tools and technologies continuously emerge to enhance our workflow, optimize performance and simplify complex tasks. One such evolution is the shift from Webpack to more modern bundlers like Vite, esbuild...
September 7, 2024
ADDING IMAGES TO MARKDOWN WITH NUXT CONTENT MODULE
How to add images to a nuxt content blog post by creating a global image component.
September 7, 2024