Programmeur
Programmeur

Reputation: 1531

Vue Nuxt Axios: cross-domain POST w/ proxy

I am trying to make a cross-domain POST using nuxt and axios

this.$axios.$post('https://hooks.zapier.com/hooks/catch/111111/xxxxx/', { name: 'Jose', })

CORS is blocking me, so I installed nuxt/proxy and setup like this:

proxy: {
    '/zapier': {
      target: 'https://hooks.zapier.com',
      pathRewrite: {
        '^/zapier': '/',
      },
    },
  },
this.$axios.$post('https://localhost:3000/zapier/hooks/catch/111111/xxxxx/', { name: 'Jose', })

āŒ But I still receive 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
  }
}

Can someone point what is wrong?

(Or if this is even possible? I am using Netlify, so it's necessary that runs on client-side)

Upvotes: 0

Views: 685

Answers (1)

Programmeur
Programmeur

Reputation: 1531

Almost there...

On dev mode I could achieve the desired result with the following setup:

  axios: {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  },

  proxy: {
    '/zapier/': {
      target: 'https://hooks.zapier.com/',
      pathRewrite: { '^/zapier/': '' },
      changeOrigin: true,
    },
  },

But proxy does not work on static sites šŸ˜Ŗ

Upvotes: 1

Related Questions