Discord Webhook CORS Error

Hello!

I’m trying to make a website, where if you click the button, it will send a message through Discord webhooks.

I know this might get a little confusing, but I’m trying my best to keep it simple.

When I’m using local host, it works fine WITHOUT the request.setRequestHeader("Access-Control-Allow-Origin", "*");. But when I put in the request.setRequestHeader("Access-Control-Allow-Origin", "*");, I get this error:

Access to XMLHttpRequest at 'https://discord.com/api/webhooks/1020540896447582260/V3adzTsSAj3ZPctUfNZc1Sf20d5aJ22yQqT0_XHFN4diuseGw7kfaFBXxSA_CX******' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

I could just leave the request.setRequestHeader("Access-Control-Allow-Origin", "*"); out so it works, but the problem is, that when I deploy the website and use the main URL, it gives me the error below either way. If I add the request.setRequestHeader("Access-Control-Allow-Origin", "*");, it shows the error below, and if I don’t use the request.setRequestHeader("Access-Control-Allow-Origin", "*");, still, it shows the error below.

Access to XMLHttpRequest at 'https://discord.com/api/webhooks/1020540896447582260/V3adzTsSAj3ZPctUfNZc1Sf20d5aJ22yQqT0_XHFN4diuseGw7kfaFBXxSA_CX******' from origin 'https://gai-services.tk' 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.

Keep in mind, that either way, it still says No 'Access-Control-Allow-Origin' header is present on the requested resource. even if I do add it.

I think that the problem is that it isn’t seeing that I added the ‘Access-Control-Allow-Origin’ header. I could be wrong as I’m very bad at programming.

Here is my over all code containing the request:

const request = new XMLHttpRequest();
        request.open("POST", "https://discord.com/api/webhooks/1020540896447582260/V3adzTsSAj3ZPctUfNZc1Sf20d5aJ22yQqT0_XHFN4diuseGw7kfaFBXxSA_CX******");
        const params = {
            username: "Testing",
            avatar_url: "",
            content: "**NEW ORDER!**\n\n**Transaction ID:**\n" + transaction.value + "\n\n**Email:**\n" + email.value + "\n\n**Name:**\n" + name.value + "\n\n**Discord:**\n" + discord.value
        }
        request.setRequestHeader('Content-type', 'application/json');
        request.send(JSON.stringify(params));

For all the times I mention the webhook URL for Discord, I censored the last couple of characters so people won’t spam my Discord server. I don’t think that involves the error. When I was getting the errors, the Discord webhook URL wasn’t censored.

All the variables in the above code are correct and accurate, I just didn’t include them in this post. Including the transaction.value and email.value.

Thank you!

Hi @TikoGrant! Try this code:

fetch("https://discord.com/api/webhooks/1024081520081784882/m0U7Gmk_hCkutbWtzLoSZV-RS3oOhcQcB491Xcp2l7F61zmduTvEDysXvopP6OyBsukY", {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
       "username": "Testing",
       "avatar_url": "",
       "content": "**NEW ORDER!**\n\n**Transaction ID:**\n" + transaction.value + "\n\n**Email:**\n" + email.value + "\n\n**Name:**\n" + name.value + "\n\n**Discord:**\n" + discord.value

    }
})
	.then(response => response.json())
	.then(data => {
})
	.catch(err => alert(`Error:\n${err}`));

fetch is an alternative to XMLHttpRequest but easier to use.
Information: Your webhook URL is not redacted. If you want me to redact it, just say! :hugs:
Hope this helps and happy glitching!
Tiago R.

Edit: I have been analyzing your code, and here are some points:

  • Your request information is exposed
  • Discord seems to be blocking you because of a 403. I think you forgot to input your username & avatar image
  • If you don’t want any avatar image, try a random one, like this one or using picsum.photos

Thanks for the reply! I’m not at my Computer right now, but I’ll be sure to try it and give you a response soon!

Hello!

I recently tried your code with the profile picture you provided, and I get this error.
image

Hi! I’ve been working and reached out finally a result. I’ve built a project with it so it’s easier for me to code it, check it out!

Hi, thanks for helping me out! Unfortunately, it didn’t work on my deployed version like always. It works fine on local host, but not the real website. I also tried it on your Glitch project adding a button to trigger the function, and I get this error. Which is the same as when I tried it as deployed on my website.
image

Thanks for your help, but the problem hasn’t been solved yet!

I appreciate your hard work :slight_smile:

Hi! I will check that out as soon as I’m on my PC, probabily tomorrow.