React、Express 和 Discord Oauth2 存在问题

Question

通过“https://discord.com/oauth2/authorize?response_type=code&redirect_uri=https%3A%2F%2Fx%2Fapi%2Fauth%2Fdiscord%2Fcallback&scope=identify%20email%20guilds.members.read%20guilds”访问 XMLHttpRequest。来自源“http://localhost:3000”的 join%20guilds&client_id=x'（从“x/api/auth/discord”重定向）已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头关于所请求的资源。

所以我尝试了一些方法来尝试解决 cors 问题，但没有任何效果。它说我点击了服务器，然后重定向到不和谐的oauth，但cors阻止了我，我不知道。

我尝试的一切都失败了，这是最后的手段

Answer 1

CORS 策略由浏览器强制执行，以限制网页向不同域中的服务器发出请求。

解决方法是设置服务器端代理/后端服务器。这是一个使用 NodeJS 的示例：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/discord/oauth', async (req, res) => {
    try {
        const response = await axios.get('https://discord.com/oauth2/authorize', {
            params: {
                response_type: 'code',
                redirect_uri: 'https://x/api/auth/discord/callback',
                scope: 'identify email guilds.members.read guilds.join guilds',
                client_id: 'YOUR_CLIENT_ID'
            }
        });
        res.send(response.data);
    } catch (error) {
        res.status(500).send('Error');
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

然后，您的客户端代码可以向

http://localhost:3000/discord/oauth

发出请求，服务器会将请求转发到 Discord。

---

另一种开发解决方案是使用浏览器扩展允许 CORS：Access-Control-Allow-Origin，这将解锁跨域资源共享。