Vue 资源被 CORS 策略阻止

Question

我知道有一些类似的胎面，但没有一种解决方案可以帮助我。

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

它在使用 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 必须设置它。