0

I'm trying to post to a Pardot form handler endpoint using Nuxt/Axios. It's getting blocked on the prefetch check. Any thoughts on how to get around this?

const url = 'https://[pardot-endpoint]';
        const requestBody = {
          'Form Data': 'example',
        }
 const config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Access-Control-Allow-Origin': '*',
          }
        }
 this.$axios.post(url, requestBody, config).then(response => {console.log(response)})

This is the error I'm receiving:

Access to XMLHttpRequest at 'https://[endpoint]' from origin 'http://my.domain.local' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Chad
  • 1
  • 2
  • Does this answer your question? [CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-\* headers on client side](https://stackoverflow.com/questions/44232370/cors-error-even-after-setting-access-control-allow-origin-or-other-access-contro) – jub0bs Jun 06 '22 at 08:32

1 Answers1

-1

The reason you're having this error is because the server you are trying to reach doesn't have the Access-Control-Allow-Origin header.

To fix this problem you either make the fetch from the same origin as the server or you add the missing header on your response headers, specifying the origin or using the wildcard * (but this is not encouraged as you're allowing any origin to access resources from the server).

You can read more on MDN Web Docs.

  • I have access-control-allow-orgin with '*' in my header – Chad Nov 05 '21 at 15:14
  • 1
    Yes, but that header must go in the **response headers**, on the server configuration. The header you are setting is in the **request headers**, on the client side. – ThatInternetGuy Nov 07 '21 at 20:01
  • Gotcha, unfortunately since it's Pardot, I don't have the ability to change that header. – Chad Nov 08 '21 at 16:27