Vue资源受到CORS政策的禁止

Question

我知道也有一些类似之处，但是没有一个解决方案对我有帮助。

我正在使用Ruby on Rails和Vue构建应用程序。目前，我正在尝试获取用户的Spotify访问令牌。因此，我只需要创建一个get请求并等待响应。

在使用Rails创建的视图中，它完美运行，但在我的Vue应用程序中却不能。

这是我的控制台中的错误：

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?client_id=261c008xxxxxx52da843b8096d&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fspotify%2Fcallback&response_type=code&scope=playlist-modify-public+user-read-email&state=5987fec3952e0c46332183c526d0abef2f0d35a13e39694e' (redirected from 'http://localhost:3000/auth/spotify') from origin 'http://localhost:3000' 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.

请求的资源上没有“ Access-Control-Allow-Origin”标头。，但如果我们检查标头，则：

在我的js文件中，我有：

Vue.http.interceptors.push(function (request, next) {
  request.headers.set('Content-Type', 'application/json');
  request.headers.set('Access-Control-Allow-Origin', '*');
  request.headers.set('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  request.headers.set('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
  request.headers.set('X-CSRF-Token', document.getElementsByName('csrf-token')[0].content);
  next();
});

我不知道在哪里看，你有想法吗？ 我已经尝试安装chrome扩展程序，允许所有起源在服务器端，用Axios替换Vue-resource，用node安装cors ...

Answer 1

Access-Control-Allow-Origin应该是 response 标头，而不是请求标头。您的后端API必须对其进行设置。