How to create hubspot form using AJAX post call (without being blocked by CORS)?

[EvanjmDavies]

Hi all! I've been trying to send data to my hubspot account (from a custom form on my website) using the api endpoint here:  https://legacydocs.hubspot.com/docs/methods/forms/v2/create_form

It states in the article below "This endpoint doesn't require authentication, so you can make the call from a form to our API without worrying about security." that https://legacydocs.hubspot.com/docs/methods/forms/forms_overview 

However when I make a POST call to the endpoint from my website or localhost, I receive the following: 

"Access to XMLHttpRequest at 'https://api.hubapi.com/forms/v2/forms?hapikey={myApiKey}' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status"

Initially, I thought I'd have to add my website domain on my hubspot account's allowlist, however that doesn't seem to be an option. 

Below is an simplified example of the AJAX call I'm using, any help/advice is appreciated, thanks! 

//API CALL REACT

import React from 'react';

import axios from 'axios';

export const CreateForm = () => {

    const data = { data }

    const myApiKey = { key }

    const createForm = () => {

        axios.post(`https://api.hubapi.com/forms/v2/forms?hapikey={myApiKey}'`, data )

        .then(res => {

          console.log(res);

          console.log(res.data);

        })

    }

    return (

      <div>

          <button onClick={createForm}>Create Form</button>

      </div>

    )

}

[zwolfson]

@EvanjmDavies and @piersg 

You cannot make any authenticated calls from the frontend of your application. That would expose your API key to anyone who wanted it. You can submit to a form that's already been created but you cannot create a form from your application.

[EvanjmDavies]

Thanks @piersg, I'm just using the dummy data from here: https://legacydocs.hubspot.com/docs/methods/forms/v2/create_form

{
"name": "DemoForm",
"action": "",
"method": "",

...

[piersg]

Ah, **bleep**. Thought it was going to be an easily-overlooked and, importantly, an easy to fix mistake haha. If it works in Postman I guess there's nothing you need to add in the headers? 

What does your JSON request body data look like?

I also think we should ask @zwolfson if he has any insights at this point.

[EvanjmDavies]

Thanks for the reply @piersg.

Apologies I made a syntax error in the question. My real code is indeed a template literal and looks like the following... 

const URL = `https://api.hubapi.com/forms/v2/forms?hapikey=${APIkey}`

The URL works fine using postman so I know it's correct. Is there not an area where i have to allowlist the domain name or something like this? 

[piersg]

Sorry for the delay on this, I was scratching my head on it for a while. Looking at your axios call above (if it accurately represents your real code) it seems that there's an extraneous quote after {myApiKey} and before the final backtick ( ` ).

axios.post(`https://api.hubapi.com/forms/v2/forms?hapikey={myApiKey}'`, data )

should be

axios.post(`https://api.hubapi.com/forms/v2/forms?hapikey={myApiKey}`, data )

Also, I think {myApiKey} needs to be a template literal: ${myApiKey}

axios.post(`https://api.hubapi.com/forms/v2/forms?hapikey=${myApiKey}`, data )

[EvanjmDavies]

Hi @piersg, any thoughts? Thanks. 

[piersg]

Hmm my first thought is that you're trying to POST to https from an http origin, and the API CORS policy may be stopping you from doing that.

[EvanjmDavies]

Thanks for your reply @piersg! My first thought too... Unfortinately I've tried from multiple https origins. Here's the same error from my website.

"Access to XMLHttpRequest at 'https://api.hubapi.com/forms/v2/forms?hapikey={myApiKey}' from origin 'https://mediablaze.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."

[dennisedson]

@EvanjmDavies , I believe @piersg was just talking about some CORS issues in another post...  Maybe he can help here 🙏