CORS policy for External APIs

zhybrid
New Member
2 0 0

Hello everyone,

I recently create a landing page where I manually have added a form from which users can subscribe to a newsletter.

The newsletter access uses the SendGrid APIs, and these are the parameters I have set up for the POST request:

 

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

 xhr.open("PUT", "https://api.sendgrid.com/v3/marketing/contacts");
xhr.setRequestHeader("authorization", "Bearer <API_KEY>");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("Access-Control-Allow-Credentials", true);
xhr.setRequestHeader("Access-Control-Allow-Origin", true);

xml.send(data)

 

however, when I try to send the below code I have the following error:

Access to XMLHttpRequest at 'https://api.sendgrid.com/v3/marketing/contacts' from origin 'https://ilbrucomela.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Also, the following line on the console is this:

PUT https://api.sendgrid.com/v3/marketing/contacts net::ERR_FAILED

which has also a pointer to this line on the file https://cdn.shopify.com/s/assets/shop_events_listener.js

Screenshot 2020-06-11 at 20.35.40.png

 

Note: On the SendGrid side, I also tested the API with Full Access

Any help would be deeply appreciated, thanks!

0 Likes
dholland
New Member
2 0 0

Were you able to find a solution here @zhybrid ? I am running into the same issues sending a post request to an external endpoint. 

0 Likes
dholland
New Member
2 0 0

Using cors-anywhere fixed this issue for me. 

https://cors-anywhere.herokuapp.com/the-api-url-you-want-to-use
 
via this post
0 Likes
shakirbhat
New Member
2 0 1

https://cors-anywhere.herokuapp.com is not a permanent solution as it has a limit of 200 hits per 60 mins.

abeconnally
New Member
4 0 0

Any permanent solution for this?

I am having the same problem.

0 Likes
Fe
Tourist
6 0 3

A solution would be to set up your own backend that interacts between the user and the SendGrid API. That way you can make sure what gets in is validated. Keep in mind that the response needs to include cross-origin resource headers, not the request. Here is a snippet I use with NGINX:

add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type';

 
I add these headers depending on the origin with the built in variable $http_origin. I'm sure the same thing can be done with other web servers, just make sure to include those headers in the response and you won't run into CORS issues. If you wish to debug your app locally without these headers in the response, you could run Google Chrome with the following flag "--disable-web-security".