GetResponse API integration Using fetch() is not working

Question

GetResponse API integration Using Fetch API method not working

The following SMS is showing in the console:

Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at
https‍://api.getresponse.com/v3/contacts.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).

Code is given below:

// main.js

// POST request using fetch()
fetch("https://api.getresponse.com/v3/contacts", {
 
 // Adding method type
 method: "POST",
 
 // Adding body or contents to send
 body: JSON.stringify(
 {
 campaign : {
 campaignId: "5D8Qm"
 },
 name: "xyz",
 email: "[email protected]"
 }
 ),
 
 // Adding headers to the request
 headers: {
 
 
 "X-Auth-Token": "api-key o9q5s264jbp9dws0nsevnagqdst81esh",
 "Content-type": "application/json"
 }
})
// Converting to JSON
.then(response => response.json())
// Displaying results to console
.then(json => console.log(json));

• azbarcea: Check your request and response headers. This is classic CORS issue (more: access-control-allow-origin)
• Abdullah Al Mamun: Thank you for your answer. Actually, When I used the cURL, it was working properly, but when I was working with the Fetch API, it was not working . I want to know the reason for this.
• HSLM: "I want to know the reason for this" -> the CORS is a browser related thing. and that is why when you use cURL it didn't happen. it is a browser-specific defensive mechanism
• azbarcea: If you use cURL, ensure you use it with: curl -s -D - https://api.getresponse.com/v3/contacts, where -s: Avoid showing progress bar, and -D: Dump headers to a file and -: forces the redirect to stdout. The headers of the HTTP protocol are important. the CORS standard happens within these headers.

Answer 1

It's a classic CORS issue as azbarcea said.

As for your comment about why cURL works but Fetch API not, you can refer to this answer in Stack Overflow.