时间戳

首页 > 解决方案 > Vue 资源被 CORS 策略阻止

ruby-on-rails - Vue 资源被 CORS 策略阻止

问题描述

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

我正在使用 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，用节点安装 cors ...

标签： ruby-on-railsvue.jsvue-resource

解决方案

Access-Control-Allow-Origin应该是响应标头而不是请求标头。您的后端 API 必须设置它。

推荐阅读