Error 401 (Unauthorized) when sending a request for adding a new list member

[SilencerWeb]

Here is how I'm trying to send a request:

fetch('https://us17.api.mailchimp.com/3.0/lists/185415c92c/members', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'anystring:8ec49e64f2041073d3fe56e0abc5fe5f-us17',
      },
      body: JSON.stringify({
        email_address: 'email@mail.ru',
        status: 'subscribed',
      }),
      mode: 'no-cors',
    })

And I get such error:
POST https://us17.api.mailchimp.com/3.0/lists/185415c92c/members 401 (Unauthorized)

What am I doing wrong?

[antonkorotkov]

Try 'Authorization': 'apikey 8ec49e64f2041073d3fe56e0abc5fe5f-us17'

[davidbernat]

Doesn't work for me with the same problem.

[myside1]

I also have same problem

[samroberts707]

I'm having the same issue, no matter what I do the request won't be sent with the Authorization header value, if I edit and resend the request with the Auth header added it works.

fetch(url, { // method: 'POST', // mode: 'no-cors', // credentials: 'same-origin', // headers: new Headers({ // 'Authorization': 'apikey XXXXXXXXXXXXXXXXXXXXXXXXX-us12', // 'Content-Type': 'application/ json' // }), // body: JSON.stringify(data) // });

[ashleymazzonna]

I kept having the same issue, I checked my Key from MailChimp in my account setting. Under KEY, it said my key "was disabled" and under LABEL it said "posted in public, do not enable". Sometimes it's not our code, it's the key itself. Try checking the key you are currently using.

[necheporenko]

Any updates?
How to do the right request?

let authenticationString = btoa('user:API_KEY-us20');
authenticationString = Basic ${authenticationString};

const result = await fetch('https://us20.api.mailchimp.com/3.0/lists/XXXXXXXX/members', {
  mode: 'no-cors',
  method: 'POST',
  headers: {
    authorization: authenticationString,
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email_address: 'somedude@gmail.com',
    status: 'subscribed',
  }),
  auth: {
    user: 'user',
    pass: 'API_KEY-us20',
  },
});

[antonkorotkov]

Any updates?
How to do the right request?

let authenticationString = btoa('user:API_KEY-us20');
authenticationString = Basic ${authenticationString};

const result = await fetch('https://us20.api.mailchimp.com/3.0/lists/XXXXXXXX/members', {
  mode: 'no-cors',
  method: 'POST',
  headers: {
    authorization: authenticationString,
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email_address: 'somedude@gmail.com',
    status: 'subscribed',
  }),
  auth: {
    user: 'user',
    pass: 'API_KEY-us20',
  },
});

Hey. Did you try to make your Authorization header look like here? #41 (comment)

[necheporenko]

Any updates?
How to do the right request?
let authenticationString = btoa('user:API_KEY-us20');
authenticationString = Basic ${authenticationString};

const result = await fetch('https://us20.api.mailchimp.com/3.0/lists/XXXXXXXX/members', {
  mode: 'no-cors',
  method: 'POST',
  headers: {
    authorization: authenticationString,
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email_address: 'somedude@gmail.com',
    status: 'subscribed',
  }),
  auth: {
    user: 'user',
    pass: 'API_KEY-us20',
  },
});

Hey. Did you try to make your Authorization header look like here? #41 (comment)

Hey, yeah, but unfortunately it didn't help me.
It works perfectly on the Postman, but not on my react app.

I guess this simple request should work on the Browser console, but not.

 const result = await fetch('https://us20.api.mailchimp.com/3.0', {
      mode: 'no-cors',
      headers: {
        Authorization: 'apikey MY-API-us20',
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    });

[antonkorotkov]

Any updates?
How to do the right request?
let authenticationString = btoa('user:API_KEY-us20');
authenticationString = Basic ${authenticationString};

const result = await fetch('https://us20.api.mailchimp.com/3.0/lists/XXXXXXXX/members', {
  mode: 'no-cors',
  method: 'POST',
  headers: {
    authorization: authenticationString,
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email_address: 'somedude@gmail.com',
    status: 'subscribed',
  }),
  auth: {
    user: 'user',
    pass: 'API_KEY-us20',
  },
});

Hey. Did you try to make your Authorization header look like here? #41 (comment)

Hey, yeah, but unfortunately it didn't help me.
It works perfectly on the Postman, but not on my react app.

I guess this simple request should work on the Browser console, but not.

 const result = await fetch('https://us20.api.mailchimp.com/3.0', {
      mode: 'no-cors',
      headers: {
        Authorization: 'apikey MY-API-us20',
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    });

Ah, you actually should not do this in the browser. I thought it is node code. Making it in the browser exposes you API Key that is not what you want I guess. Instead, you should proxy your request using some backend handler which will, in turn, communicate with the Mailchimp servers using PHP, nodejs or whatever your backend is. In other words, Mailchip just does not allow doing direct requests from the browser. Postman works because it is basically not a browser.

I had the same issue for a long

But then I realized it was an issue with mailchimp

So instead I used Firebase by google

It worked way better than Mailchimp

Here is the link: https://firebase.google.com/

Hope this helps!