Question

我在AngularJS上使用omniauth-facebook并且CORS无法正常工作。

我的omniauth.rb是

Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook,"xxxxx", "xxxxx",
:scope => 'email,user_birthday,read_stream', :display => 'popup'

end

如果我将它用作rails app并请求，那么一切正常。但当我尝试通过Angular JS调用'http：\ localhost：3000 \ users \ auth \ facebook“时

$http.get('/users/auth/facebook').success(function(data, status, headers, config) {
            console.log("back in success");
            }).
            error(function(data, status, headers, config) {

            });
    }

我在JS控制台中看到以下错误

XMLHttpRequest无法加载 https://www.facebook.com/dialog/oauth?client_id=xxxx&display=popup ... thday％2Cread_stream＆安培;状态= 3352c1924bdbc9277f7b1070c38d67acf79b529f198323cb。请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许来源'http://localhost:3000' 访问。

（网址中未完全显示网址）

我添加了以下行

config.middleware.insert_before Warden::Manager, Rack::Cors

但这也行不通。

最好的方式是什么或如何覆盖OmniAuth的标头？

我正在使用Angularjs和gem devise，omniauth-facebook

Answer 1

由于您使用的是开发环境，因此您可能希望浏览器以非安全模式运行，从而尝试解决方法。

对于Windows上的Chrome，请从CMD尝试：

> cd C:\Program Files (x86)\Google\Chrome\Application
> chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

--disable-web-security标志将允许您发出跨域请求。 --user-data-dir标记可让您开设新会话进行开发。

这只是您开发工作的解决方法！不要在制作中使用它或导航到本次会议中的其他网站！

Answer 2

问题是Javascript无法进行跨域请求。这样做是出于安全原因，因此脚本无法调用远程服务器并暴露敏感数据。

下面是一个非常简单的解释链接，其中包含一些如何解决这个问题的选项：

http://developer.yahoo.com/javascript/howto-proxy.html

这是以前的答案，其中也有一些很好的信息：

Why am I seeing an "origin is not allowed by Access-Control-Allow-Origin" error here?

Answer 3

如果他们没有设置标题，那么你不能强迫他们拥有标题。也许您应该考虑使用JSONP。但是，通过服务器进行镜像并不是那么糟糕，因为每次访问最多只能处理一次，而且很可能每个用户只需要处理一次，因为很少有人会删除cookie。

Answer 4

在服务器中设置'Access-Control-Allow-Origin'将进行跟踪。喜欢： ruby headers['Access-Control-Allow-Origin'] = '*' 在rails。

Answer 5

问题是您从https安全网站获取的数据是您的网站http，因此最新的浏览器不支持交叉允许来源。

唯一的解决方案是让您的网站支持https。

Answer 6

在ApplicationController.rb中添加

  def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
  end

Answer 7

对于CORS，您必须将要从服务器端的跨源请求访问的域列入白名单

    headers['Access-Control-Allow-Origin'] = '*'
//star will allow all the domain you can specify also which url u want to access

在客户端，您必须将config（）中的标头设置为

   $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
   $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Answer 8

有时因浏览器而出现问题。默认情况下，允许跨域请求。在chrome中，您需要添加一个“Allow-Control-Allow-Origin：*”插件并启用它。

请求的资源上不存在“Access-Control-Allow-Origin”标头

8 个答案: