javascript - Vue Nuxt Axios : cross-domain POST w/proxy

Question

我正在尝试使用 nuxt 和 axios 进行跨域 POST

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

CORS 阻止了我，所以我安装了 nuxt/proxy 并进行了如下设置:

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

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

❌但我仍然收到相同的错误响应:

{
  "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
  }
}

有人能指出哪里出了问题吗？

(或者如果这可能的话？我使用的是 Netlify，所以有必要在客户端运行)

Answer 1

快到了...

在开发模式下，我可以通过以下设置实现所需的结果:

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

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

但是proxy不适用于静态网站😪