javascript - 来自前端的 Linkedin oauth/v2/accessToken API 的 CORS 错误

Question

我正在尝试访问 Linkedin accessToken API，但在 React js(前端)中总是面临 CORS 错误。在 URL 栏或通过 postman 直接点击时同样有效。这是我收到的错误:

从来源“http://localhost:3000”获取“https://www.linkedin.com/oauth/v2/accessToken”的访问已被 CORS 策略阻止:无“访问控制” -Allow-Origin' header 出现在请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我的代码是:

const queryParams = querystring.stringify({
  redirect_uri: process.env.REACT_APP_LINKEDIN_REDIRECT_URI,
  client_id: process.env.REACT_APP_LINKEDIN_CLIENT_ID,
  client_secret: process.env.REACT_APP_LINKEDIN_CLIENT_SECRET,
  grant_type: 'authorization_code',
  code: code,
});
const headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
};


const response = await fetch(`https://www.linkedin.com/oauth/v2/accessToken`, {
  method: 'POST',
  headers: headers,
  body: queryParams,
});

`

Answer 1

API 响应不包含 Access-Control-Allow-Origin header ，因此您的浏览器禁止对这些 API 的请求。

这里有两个选择:

1. 使用 2-legged OAuth flow 在后端获取访问 token
2. 或使用3-legged OAuth flow这需要您将用户的浏览器重定向到 Linkedin 的网站

从安全的 Angular 来看，你should not distribute the client secret in HTML/JS files .