I’m trying for many hours now, to get a simple post request to my external api working from Nuxt.
It works as expected from a seperate node instance, I can POST and GET as needed with the following:
const headers = { 'Content-Type': 'application/json', 'access-token': 'myTokenXYZ123' }; const data = { test: 'Hello!' }; const postSomething = () => { axios.post('https://myapidomain.com/api', data, { headers: headers }); }; postSomething();
Also with curl:
curl -X POST -H 'access-token: myTokenXYZ123' -H 'Content-Type: application/json' -d '{ "test": "Hello!" }' https://myapidomain.com/api
So far so good, now I want to implement this in my Nuxt project. I had to set up a http proxy first, which I did in nuxt.config.js
like this:
[...] modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], proxy: { '/my-api/': { target: 'https://myapidomain.com/api', pathRewrite: {'^/my-api/': ''} }, }, axios: { proxy: true }, [...]
I’m pretty confident that the proxy is working, because I can get the data with the following method:
methods: { async getSomething() { let requested = await this.$axios.get('/my-api/', { headers: this.headers }); return requested.data; } }
But whatever I do, the POST request does not work. This is how I tried:
methods: { postSomething() { const data = { test: 'Hello!' }; this.$axios.post('/my-api/', data, { headers: { 'Content-Type': 'application/json', 'access-token': 'myTokenXYZ123' } }); } }
I tried various different formats, e.g. like this:
methods: { postSomething() { const headers = { 'Content-Type': 'application/json', 'access-token': 'myTokenXYZ123' }; const data = { test: 'Hello!' }; const options = { method: 'post', url: '/my-api/', data: data, transformRequest: [(data, headers) => { return data; }] }; this.$axios(options); } }
But it does not seem to work. The request is running and aborts after a while with the following error in the terminal:
ERROR [HPM] Error occurred while trying to proxy request from localhost:3000 to https://myapidomain.com/api (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
A few other things I already tried:
Running API and Nuxt locally
Using axios imported in template and as nuxt module
Request from builded and productive version
Async and synchronous methods
Steps to reproduce:
# Download and start API server git clone https://github.com/consuman/api-demo.git cd api-demo/ npm install node src # In a second terminal download and start Nuxt server git clone https://github.com/consuman/api-demo-nuxt.git cd api-demo-nuxt npm install npm run dev # Navigate to http://localhost:3000 # Relevant code is in /api-demo-nuxt/pages/index.vue
To test, if the API is working, you can POST with curl:
curl -X POST -H 'access-token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjaGVjayI6dHJ1ZSwiaWF0IjoxNTg2MTYzMjAxLCJleHAiOjE2MTc2OTkyMDF9.vot4mfiR0j6OewlJ0RWgRksDGp-BSD4RPSymZpXTjAs' -H 'Content-Type: application/json' -d '{ "testData": "Hello from API, posted from curl, please overwrite me!" }' http://localhost:3001/api
Thank you for reading. Any hint would be much appreciated!
Advertisement
Answer
I have found the problem. There was a server middleware configured, that was not needed anymore. It triggered at every POST request.
Stupid mistake, but this is how you learn, right? xD
The steps to reproduce are a working demo now, in case anyone needs something similar.
Cheers!
Here is the working demo again:
# Download and start API server git clone https://github.com/consuman/api-demo.git cd api-demo/ npm install node src # In a second terminal download and start Nuxt server git clone https://github.com/consuman/api-demo-nuxt.git cd api-demo-nuxt npm install npm run dev # Navigate to http://localhost:3000 # Relevant code is in /api-demo-nuxt/pages/index.vue