angularjs - 向 Rails API 发送带有参数的 Angular post 请求

Question

我无法将 Angular 前端与 Rails 后端 API 完全集成。它们都运行在不同的服务器上，所以我认为我在 CORS 方面遇到了问题。

我的 Angular 应用程序正在运行一个 Controller ，该 Controller 正在调用一个具有查询 (GET) 和保存 (POST) 方法资源的服务。查询 (GET) 工作正常，但帖子无法工作。

当我不发送任何参数时，我可以向服务器发送 POST 请求。像这样:

Controller :

$scope.createBusiness = function() {

        console.log("Business.name=" + $scope.business.name);           
        $scope.business = Business.save(); 
    };

服务:

 .factory('Business', 

  function($resource){          
    var businesses =
     $resource('http://127.0.0.1\\:3000/:business', {business:'businesses'}, {      
        query: {method:'GET', isArray: true},
        save: {method:'POST', isArray: false}
     });        
     return businesses;           
  }

);

但是，我想发布我的模型参数，因此当我尝试发送某些内容时，我不再发送 POST 请求，而是发送 OPTIONS 请求。我收到一个错误。

当我发送不带参数的请求(POST 请求)时，请查看我的请求数据:

Request URL:http://127.0.0.1:3000/businesses
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:es-ES,es;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:text/plain;charset=UTF-8
Host:127.0.0.1:3000
Origin:http://localhost:1234
Referer:http://localhost:1234/app/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods:POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1728000
Access-Control-Request-Method:*
Cache-Control:max-age=0, private, must-revalidate
Connection:Keep-Alive
Content-Length:9
Content-Type:application/json; charset=utf-8
Date:Mon, 04 Nov 2013 16:50:33 GMT
Etag:"ccd3d779b6f97e2c24633184cbc8f98c"
Server:WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27)
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:e084295e-c7c6-4566-80d1-6e2a8ac2e712
X-Runtime:0.034000
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

我到达服务器，执行该方法并获得响应!还行吧。

并且，当我发送请求WITH参数(OPTIONS请求)时查看我的请求数据:

Request URL:http://127.0.0.1:3000/businesses
Request Method:OPTIONS
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:es-ES,es;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:127.0.0.1:3000
Origin:http://localhost:1234
Referer:http://localhost:1234/app/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Response Headersview source
Connection:Keep-Alive
Content-Length:131852
Content-Type:text/html; charset=utf-8
Date:Mon, 04 Nov 2013 16:54:04 GMT
Server:WEBrick/1.3.1 (Ruby/2.0.0/2013-06-27)
X-Request-Id:25705159-fbfb-4830-a0f1-6610fa09b70e
X-Runtime:0.371000

更新

我在添加模型参数时忘记添加 Controller :

$scope.createBusiness = function() {

        console.log("Business.name=" + $scope.business.name);           
        $scope.business = Business.save($scope.business); 
    };

我有多个 View ，有多个表单，因此，我不想只发布表单，而是发布范围内的业务对象模型(并且我填充了所有表单的数据)。

更新

这是我的 Rails Application_Controller(CORS 配置):

class ApplicationController < ActionController::Base


 # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  # OJOJOOJO: Rober: I have commented this line which is provided by default with rails and added all code below in order to 
  # add CSRF protection 
  #protect_from_forgery with: :exception

  protect_from_forgery

  before_filter :cors_preflight_check
  after_filter :cors_set_access_control_headers, :set_csrf_cookie_for_ng

# For all responses in this controller, return the CORS access control headers.

  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
    headers['Access-Control-Max-Age'] = "1728000"
  end

# If this is a preflight OPTIONS request, then short-circuit the
# request, return only the necessary headers and return an empty
# text/plain.

  def cors_preflight_check
    if request.method == :options
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
      headers['Access-Control-Request-Method'] = '*'
      headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
      headers['Access-Control-Max-Age'] = '1728000'
      render :text => '', :content_type => 'text/plain'
    end
  end

  def set_csrf_cookie_for_ng
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  end

protected

  def verified_request?
    super || form_authenticity_token == request.headers['X_XSRF_TOKEN']
  end  
end

Answer 1

我终于成功了。

我将解释我在 Angular 和 Rails 4 中的所有配置，因为我想阅读它。

Angular

1. app.js:

   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.i18n', 'demo']).
   config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
   
   $httpProvider.defaults.useXDomain = true;
   delete $httpProvider.defaults.headers.common["X-Requested-With"];           
   

   }]);

注意:当然，您不需要包含我的所有模块。

1. 在我看来:

   <form novalidate="" name="createBusinessForm" ng-submit="setBusinessInformation()" class="css-form">            
           <label>* {{'BUSINESS_NAME' | translate}}</label>
           <input type="text" name="name" ng-model="business.name" class="input-xxlarge input-height-large" placeholder="{{'BUSINESS_NAME_PLACEHOLDER' | translate}}" required maxlength="80">
           <span ng-show="createBusinessForm.name.$dirty && createBusinessForm.name.$error.required" class="text-error">Mandatory field.</span>
           <label>* {{'ID' | translate}}</label>    
           <input type="text" ng-model="business.cif_nif" class="input-xlarge input-height-large" placeholder="{{'BUSINESS_ID_PLACEHOLDER' | translate}}" required maxlength="60">        
           <label>* {{'ADDRESS' | translate}}</label>    
   

注意:您可以根据需要定义任意数量的字段，并使用数据绑定(bind)将值分配给对象。

1. 在我的 Controller 中:

   $scope.createBusiness = function() {
   
           $scope.business.type = $scope.type; 
           $scope.business.plan = $scope.plan;     
           $scope.business = Business.save($scope.business);           
           $location.path('/user-dashboard');                              
       }; 
   

注意:您需要在 post 请求中发送的所有属性。除了表单之外，您还可以在发送到 Rails API 之前为对象分配一些新属性。我们将使用带有资源对象的服务来发送 POST 请求。

1. 为我服务:

   .factory('业务',

     function($resource){          
       var businesses =
        $resource('http://127.0.0.1\\:3000/:business', {business:'businesses'}, {      
           query: {method:'GET', isArray: true},
           save: {method:'POST', isArray: false}
        });        
        return businesses;           
     }
   

   );

注意:我有一个 GET 请求，通过 Rails API 和 POST 请求从数据库获取业务。

Rails 4

重要

1. 路线.rb

   match "/businesses" => "application#index", via: :options  
   

注意:与 Angular 服务器将发送的 OPTIONS 请求相匹配的新条目，以预先协商开始发送 POST 请求。

1. application_controller.rb

   class ApplicationController < ActionController::Base
   
   
   before_filter :set_headers
   
   def index
     puts "Do nothing."
     render nothing: true
   end
   
   def set_headers
     puts 'ApplicationController.set_headers'
     if request.headers["HTTP_ORIGIN"]     
     # better way check origin
     # if request.headers["HTTP_ORIGIN"] && /^https?:\/\/(.*)\.some\.site\.com$/i.match(request.headers["HTTP_ORIGIN"])
       headers['Access-Control-Allow-Origin'] = request.headers["HTTP_ORIGIN"]
       headers['Access-Control-Expose-Headers'] = 'ETag'
       headers['Access-Control-Allow-Methods'] = 'GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD'
       headers['Access-Control-Allow-Headers'] = '*,x-requested-with,Content-Type,If-Modified-Since,If-None-Match,Auth-User-Token'
       headers['Access-Control-Max-Age'] = '86400'
       headers['Access-Control-Allow-Credentials'] = 'true'
     end
   end               
   end
   

2. 我的 Rails Controller

   def create
     puts 'Businesses_controller.create!!!!!'
     puts business_params.inspect
   
     # business_type object is recovered from db
     businessTypeName = params[:type]    
     businessType = BusinessType.where(:name => businessTypeName).first
     ...
   end
   

注意:在这里做你需要的任何事情......