访问控制允许源代码 405？答案

【问题标题】：Access-Control-Allow-Origin code 405?访问控制允许源代码 405？
【发布时间】：2016-11-26 18:20:20
【问题描述】：

我正在使用 Jhipster 和 Jhipster-ionic 以及 cordova 开发一个移动应用程序。目前，我正在使用基于令牌的 AngularJS 身份验证 (Satellizer) 使用 OAuth 2.0 登录，但我遇到了 CROSS 来源问题。

我在 Satellizer-ionic 上遵循了这个例子，然后我做了休耕

我的配置：

 .config(function($authProvider) {
   $authProvider.httpInterceptor = false;
   $authProvider.withCredentials = true;

    var commonConfig = {
      popupOptions: {
        location: 'yes',
        toolbar: 'yes',
        width: window.screen.width,
        height: window.screen.height
      }
    };

    if (ionic.Platform.isIOS() || ionic.Platform.isAndroid()) {
      commonConfig.redirectUri = 'http://localhost:3000/';
    }

    $authProvider.facebook(angular.extend({}, commonConfig, {
      clientId: 'MyFacebookId',
      url: 'http://localhost:8080/social/signup'
    }));

    $authProvider.google(angular.extend({}, commonConfig, {
      clientId: 'Myid.apps.googleusercontent.com',
      url: 'http://localhost:8080/social/signup'


      }));
      })
      .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
          if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          }
          if (window.StatusBar) {
            StatusBar.styleDefault();
          }
        });
      });

控制器：

vm.authenticate = function(provider) {
  $auth.authenticate(provider)
    .then(function(res) {
      $ionicPopup.alert({
        title: 'Success',
        content: 'You have successfully logged in!'
      })
      console.log("yes google login works");
      console.log('success', 'Welcome', 'Thanks for coming back, ' + res.user.displayName + '!');

    })
    .catch(function(error) {
      console.log(error);
      $ionicPopup.alert({
        title: 'Error',
        content: error.message || (error.data && error.data.message) || error
      });
      console.log("too bad" + error.data);
    });
};

HTML：

<button class="btn btn-full btn-fb active db" ng-click="vm.authenticate('google')" type="submit" translate="{{'welcome.loginGoogle' |translate}}"></button>

<button class="btn btn-full btn-fb active db" ng-click="vm.authenticate('facebook')" type="submit" translate="{{'welcome.loginFacebook' |translate}}"></button>

但是我收到了这个错误：

我已取消注释 application.yml 上的 cors

cors: #By default CORS are not enabled. Uncomment to enable.
        allowed-origins: "*"
        allowed-methods: GET, PUT, POST, DELETE, OPTIONS
        allowed-headers: "*"
        exposed-headers:
        allow-credentials: true
        max-age: 1800

我的 Jhipster 版本是 v3.5.1。

【问题讨论】：

您是否尝试过按照错误提示进行操作？您的授权域需要有一个 Access-Control-Allow-Origin 标头。
@MattClark 是的，我试过了，但没用。
这是一个后端 CORS 问题...你所有的前端代码都没有意义
我用的是jhipster，cross已经配置好了
你试过在设备中运行它吗？

标签： angularjs cordova ionic-framework jhipster satellizer

【解决方案1】：

我在代码上犯了一些错误，commonConfig.redirectUri 应该是我的后端 URL，这里是解决方案：

.config(function($authProvider) {
   $authProvider.httpInterceptor = false;
   $authProvider.withCredentials = true;

    var commonConfig = {
      popupOptions: {
        location: 'yes',
        toolbar: 'yes',
        width: window.screen.width,
        height: window.screen.height
      }
    };

    if (ionic.Platform.isIOS() || ionic.Platform.isAndroid()) {
    commonConfig.redirectUri = 'http://localhost:8080/sigin/google';
    }

    $authProvider.google(angular.extend({}, commonConfig, {
      clientId: 'googleAppId',
     // url: "http://localhost:8080/sigin/google"
    }));
    console.log($authProvider);
  })
  .run(function($ionicPlatform) {
    console.log($ionicPlatform);
    $ionicPlatform.ready(function() {
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  });

【讨论】：