Join the Ready, Set, Send Challenge Week 3. Share your QR code or landing page and win a badge!

CORS problem in react form (add a Contact to the collection contacts)

PauliusG6
Rookie
0 Votes
Hello
I would like to add a Contact to the collection contacts.
I have seen an example on site https://constantcontact.mashery.com/io-docs
Also, I have tested my request in https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm and it working for me. My contacts created successfully and I can see my new contact by next link https://app.constantcontact.com/pages/contacts/ui#contacts/...
 
 
So, I use next code in my react app:
 
const params = {...}
 
fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer af******b',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
});

 

I have next error:

Access to fetch at 'https://api.constantcontact.com/v2/contacts?action_by=ACTION_BY_VISITOR&api_key=mw*****kt' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

Why I can't create Contact by my form?

How I can create Contact by my form?

Can you help me, please?

 

1 REPLY 1
Courtney_E
Moderator
0 Votes

Thank you for reaching out to Constant Contact API Developer Support, and for your patience. My team is here to assist outside software developers with questions about building into Constant Contact's API.

 

It looks like you are using the V2 version of our API. Switching to our V3 API should resolve the issue you are having. In V3, CORS is supported and the response should include an Access-Control-Allow-Origin header.

 

Unfortunately we do not support CORS on our V2 API and it can only be called from the back end of a website. There are no current plans to implement cross-origin resource sharing on V2, so you would need to use a server-side process to make the actual calls to our API or switch to the V3 API. Solutions that others have used with V2 is to have a separate server and pass data via AJAX to that separate server, then make the API calls on your server behind the scenes.

 

Getting Started with V3 API
https://v3.developer.constantcontact.com/api_guide/index.html


Regards,

Courtney E.
Tier II API Support Engineer

Did I answer your question?
If so, please mark my post as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.
Resources
Developer Portal

View API documentation, code samples, get your API key.

Visit Page

Announcements

API Updates

Join our list to be notified of new features and updates to our V3 API.

Sign Up