PHP站点调用Discord webhook报CORS错误，本地正常线上失效如何解决？

问题原因 #

• 你在前端JS直接发起对Discord webhook接口的跨域请求，CORS是浏览器的同源安全策略，Discord的接口响应头没有允许你的站点域名跨域访问，因此请求被拦截
• 你在自己站点加的Access-Control-Allow-Origin头完全无效：这个头是用于控制其他站点请求你自己站点接口的跨域权限，管不到你前端请求第三方接口的跨域限制
• 本地运行正常大概率是因为你本地开了跨域调试插件、或者用file协议打开页面时浏览器安全限制宽松，线上环境严格执行同源策略就会报错
• 额外风险：把Discord webhook地址直接写在前端代码里，任何人都可以爬取后恶意刷请求，你的webhook很快就会被Discord封禁

解决方案：走PHP后端代理转发请求 #

不要让前端直接请求Discord接口，由你自己的PHP后端接收前端请求，再转发到Discord，同域请求不会有跨域问题，同时还能隐藏webhook地址。

步骤1：新建代理文件 send_webhook.php 放在站点根目录 #

<?php
// 有跨域需要的话可以放开下面这行，填你自己的站点域名即可
// header('Access-Control-Allow-Origin: https://你的站点域名');
header('Content-Type: application/json; charset=utf-8');

// 把你的Discord webhook地址存在后端，不要暴露给前端
$webhook_url = "你的Discord webhook实际地址";

// 接收前端传的参数
$postData = file_get_contents('php://input');

// 转发请求到Discord
$ch = curl_init($webhook_url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);

// 返回请求结果给前端
echo $response;
?>

步骤2：修改前端页面的JS代码 #

把原来直接请求Discord地址的逻辑改成请求你自己的send_webhook.php：

function send() {
    // 改成请求你自己的后端代理接口
    var url = "/send_webhook.php";
    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.setRequestHeader('Content-type', 'application/json');
    
    // 以下embed构造逻辑为你原有自定义配置，直接保留你实际使用的参数即可
    var myEmbed2 = {
        "author": {
            "name": "username",
            "url": "你的自定义链接",
        },
        "title": "title",
        "url": "你的自定义链接",
        "description": "title",
        "color": 15258703,
        "fields": [
            {
                "name": "text",
                "value": "text",
                "inline": true
            },
            {
                "name": "text",
                "value": "text",
                "inline": true
            },
            {
                "name": "text",
                "value": "text"
            },
            {
                "name": "Thank You!",
                "value": "text"
            }
        ],
        "thumbnail": {
            "url": "你的自定义图片链接"
        },
        "footer": {
            "text": "text",
            "icon_url": "你的自定义图片链接"
        }
    }
    
    var params = {
        username: "username",
        avatar_url: "你的自定义图片链接",
        embeds: [ myEmbed2 ]
    }
    
    request.send(JSON.stringify(params));  
}
send()

注意事项 #

• 确保你的线上主机支持curl扩展，绝大多数PHP环境默认都已开启
• 不要在前端代码里保留任何Discord webhook地址，防止被恶意滥用

内容的提问来源于stack exchange，提问作者Mic12zz