HTTP 200 但 Access-Control-Allow-Origin 被 Dribbble API 拒绝 POST

Question

我在 Dribble 工作 API 并收到此错误消息：

XMLHttpRequest cannot load https://dribbble.com/oauth/token?client_id=08b8dec4ee5c7af3edd96e0a27eb97f8…a739&code=2806099a944253b647afe25ba384d68a90ca04158a1d1dceadddfe076de941f0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

我已经尝试了很多不同的方法来设置 Access-Control-Allow-Origin = '*' 但其中 none 对我有用，但是阅读 console.log(res._headers) 我可以看到它正在定义中，我通过 POST 请求发送它，但 header 不工作。这是我在 Express v4 的 app.js 中定义的设置 header.

的方法之一

app.all("/", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS");
  res.header("Access-Control-Expose-Headers", "ETag, Link, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset");
  res.header("Access-Control-Max-Age", "86400");
  res.header("Access-Control-Allow-Credentials", true);
  return next();
});

这就是我使用 Axios 发送 POST 请求的方式：

export const postUserOAUTH = code => ((dispatch) => {
  axios({
    url: `https://dribbble.com/oauth/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}`,
    method: 'post',
  }).then((response) => {
    dispatch({ type: 'shots', payload: { registerResponse: response.data, token: response.data.access_token } });
    console.log('ok')
  }).catch((error) => {
    dispatch({ type: 'shots', payload: { registerResponse: error.message } });
    console.log('error')
  });
});

编辑：现在问题发生了一点变化，代码状态为 200，我收到了 API 响应我的请求的令牌，但仍然有同样的错误，代码仍在 .catch 中，而不是在.then，我附上了 Image Error. I don't think this a problem about authentication since i am now getting the response that i want, but with this error i can't work with promises in my code. Step 2. Dribbble redirects back to your site.

的 link

Answer 1

看起来您正试图在响应 object 而不是请求（以及 header您尝试设置的是服务器将在成功的 CORS 请求上设置的 header。相反，试试这个：

app.all("/", function(req, res, next) {
  req.header("Origin", "*"); // ideally the '*' will be your hostname
  return next();
});

服务器随后应使用您尝试在 object 上设置的 header 进行响应。

免责声明：我不了解 Express，这段代码可能无法像写的那样工作，但希望你能理解。

有关 CORS 的更多信息，请查看：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

此外，您可以在此处查看我们设置 Origin header 的示例：http://developer.dribbble.com/v1/#cross-origin-resource-sharing

干杯，

伊恩

开发者@Dribbble

HTTP 200 但 Access-Control-Allow-Origin 被 Dribbble API 拒绝 POST

HTTP 200 but Access-Control-Allow-Origin denied with POST with Dribbble API

node.js

cors

express

google-chrome-devtools

axios