I've been attempting to perform a cross-domain POST request using nuxt and axios
this.$axios.$post('https://hooks.zapier.com/hooks/catch/111111/xxxxx/', { name: 'Jose', })
Encountering CORS blocking, I decided to try using nuxt/proxy with the following setup:
proxy: {
'/zapier': {
target: 'https://hooks.zapier.com',
pathRewrite: {
'^/zapier': '/',
},
},
},
this.$axios.$post('https://localhost:3000/zapier/hooks/catch/111111/xxxxx/', { name: 'Jose', })
❌ However, I am still receiving the same error response:
{
"message": "Network Error",
"name": "Error",
"stack": "Error: Network Error\n at createError (http://localhost:3000/_nuxt/commons.app.js:771:15)\n at XMLHttpRequest.handleError (http://localhost:3000/_nuxt/commons.app.js:306:14)",
"config": {
"url": "https://localhost:3000/zapier/hooks/catch/111111/xxxxx/",
"method": "post",
"data": "{\\"name\":\"Jose\"}",
"headers": {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8"
},
"baseURL": "http://localhost:3000/",
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1
}
}
Could someone help me identify what's causing this issue?
(Is it even feasible? My site is hosted on Netlify, so it needs to work on the client-side)