Example of POST thru Kor Connect

Implementation
#1

I would like to see or get guidance on making a POST request to an api. I am using react and axios. The post is sending data and I cannot find anywhere on the net that has an example.
-Thanks

#2

Hello Michael!

Absolutely, you can make POST and any other method calls to any API. Here are some resources that should set you in the right direction. These articles provide several examples of how to use Axios and React with KOR Connect. I have also sent you a link to a repository of a project. Please let me know if you have further questions.

1 Like
#3

Yes I have scanned through the links you have provided. I am trying to link the Kor Connect middleware with Emailjs. Emailjs allows for sending email via /send api. These examples still all show pulling down data, then displaying it client side. In contrast, I need my client-side fields to be sent on submit: client form → integrated Kor Connect (with Emailjs being the endpoint) → Emailjs constructing the email from the data and sending it from there.

When I look at the code snippets from Kor doc:

  • I am having a hard time knowing how to structure the request for my purposes. I need to “auth” with the reCaptcha, send the token & timestamp (Kor) in the headers. Emailjs also requires that I send template_id, service_id, user_id and the data. How do I formulate a request such as this?
  • where in the Kor React implementation example, specifically the axios.get() request would I add my data payload that Emailjs requires?

*I can get it to work with just Emailjs’ api, or when using rapid-api, but it is exposing the api key - not good, that’s where I need Kor to middle that and hold the key for me.

1 Like
#4

Hello Michael,

You can send the same Axios with a POST and it should work. The code should look something like this:

// POST request using axios with set headers
const element = document.querySelector('#post-request-set-headers .article-id');
const yourPayload = { title: 'Axios POST Request Example' };
const headers = { 
    'x-api-key': 'z4CBXsABbl91fImzNBbewY7EfMrCc8D6IvjpQjhh', 
    token,
    timestamp,
    'yourFirstHeader': 'firstHeader',
    'yourSecondHeader': 'secondHeader',
};
axios.post('https://yourconnection.korconnect.io/test-001', yourPayload, { headers })
    .then(response => element.innerHTML = response.data.id);

You send the KOR token, timestamp and x-api-key, but you also can send the other headers, and the payload that you need and your end API will receive them.

Try it, and if it doesn’t work, send us your Axios code and we will check it to see if something is missing.

#5

Alright, that’s basically how I had it configured. Thanks for helping there! It definitely cools down my brain a bit knowing I was on the right track haha. I decided to implement it in almost identical manner (after your example) and to scrap any mishaps I might have made. I am now getting a Cors allow cross origin flag. I tried to remedy with the Cors extension that’s ref’d somewhere else and have it allowing while in localhost. I also tried adding it to the headers (‘Access-Control-Allow-Origin’ : ‘*’) just to see if that worked differently.

  • Unfortunately, it still returns the Cors flag.
  • Then after delay, I get a 200 but no response at all (I think due to the Cors error). Do you have any inputs on that?

What if anything, can I do to or should do to avoid this cross origin rejection if the app were in production?

Thanks again!

#6

Hello Michael,

Your implementation should work in production and if it’s in production, it will return the response only from the configured allowed hostnames, it will return a CORS or no response if the origin from where the request is coming is not one of the allowed hostnames. But if it’s OK, you can send us your frontend code to support@getkor.io and we can test it to see if is something is missing.

#7

Hi, Micheal.
I Want to know if you’ve found a solution.
I’m also facing the same issue with email js.