使用Nuxt/Axios调用Pardot端点POST请求出现CORS错误如何解决

Pardot 公开表单处理端点默认不会为第三方前端域名返回 CORS 相关响应头，且你在请求头中添加的 Access-Control-Allow-Origin 属于响应头，放在请求侧完全无效，反而会触发更严格的预检校验，最终被浏览器拦截。

方案1：使用 Nuxt 内置代理（最推荐） #

Nuxt 支持配置代理将前端请求转发到后端再发起调用，服务端请求不存在 CORS 限制，兼容性最好。

• Nuxt2 配置示例（nuxt.config.js）：

module.exports = {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/pardot-api': {
      target: 'https://[你的Pardot端点根域名]',
      pathRewrite: { '^/pardot-api': '' },
      changeOrigin: true
    }
  }
}

• 调整前端请求代码：

// 请求你自己的代理路径，不用直接调用Pardot域名
const url = '/pardot-api/[Pardot端点剩余路径]';
// form-urlencoded格式需要序列化请求体，不能直接传对象
const requestBody = new URLSearchParams({
  'Form Data': 'example',
}).toString()
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  }
}
this.$axios.post(url, requestBody, config).then(response => {console.log(response)})

方案2：调整请求为简单请求绕开预检 #

符合浏览器简单请求规则的请求不会触发预检，你可以调整参数适配规则，部分场景下可直接调用成功：

• 不要添加任何自定义请求头，仅保留Content-Type，且取值只能是 application/x-www-form-urlencoded、multipart/form-data、text/plain 三者之一
• 请求体使用 FormData 或者 URLSearchParams 格式，不要直接传JS对象
  注意：该方案受Pardot安全策略限制，部分场景下仍会被拦截，稳定性低于代理方案

方案3：自建服务端中转接口 #

如果无法使用Nuxt代理，你可以自行开发一个后端接口，接收前端请求后再转发到Pardot端点，最终把结果返回给前端，原理和Nuxt代理一致，不存在CORS限制。

• 永远不要在前端请求头中添加 Access-Control-Allow-Origin 字段，该字段是服务端返回给浏览器的响应头，请求侧添加完全无效，还会导致请求升级为非简单请求触发预检
• 发送 application/x-www-form-urlencoded 格式请求时，必须将请求体序列化为键值对字符串，否则Axios会自动转为JSON格式，和Content-Type声明不匹配，导致请求参数解析失败

内容的提问来源于stack exchange，提问作者Chad