我无法将角度前端与Rails后端API完全集成。他们都运行在不同的服务器，所以我认为我有CORS的问题。
我的Angular应用程序正在运行一个控制器，该控制器正在调用具有查询(GET)和保存(POST)方法的资源的服务。查询(GET)工作正常，但是该帖子不工作。
当我没有发送任何参数时，我可以向服务器发送POST请求。喜欢这个：
控制器：
$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,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
UPDATE
$scope.createBusiness = function() {
console.log("Business.name=" + $scope.business.name);
$scope.business = Business.save($scope.business);
};
我有几个意见，有几种形式，所以，我不想只发布一个表单，但是我有范围的业务对象模型(我填写了所有表单的数据)。
UPDATE
这是我的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,OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin,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,OPTIONS'
headers['Access-Control-Request-Method'] = '*'
headers['Access-Control-Allow-Headers'] = 'Origin,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
我终于做好了工作。
原文链接：https://www.f2er.com/angularjs/144703.html我会解释所有我的配置在Angular和Rails 4，因为我会喜欢阅读它。
角
> 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"];
}]);
注意：当然，您不需要包含我所有的模块。
>在我看来：
<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>
注意：您可以根据需要定义尽可能多的字段，并使用数据bingind将值分配给对象。
>在我的控制器：
$scope.createBusiness = function() {
$scope.business.type = $scope.type;
$scope.business.plan = $scope.plan;
$scope.business = Business.save($scope.business);
$location.path('/user-dashboard');
};
注意：发送请求中需要发送的所有属性。除了表单，您可以在发送到Rails API之前，将一些新属性分配给对象。我们将使用与资源对象的服务来发送POST请求。
>在我的服务：
.factory( ‘商务’，
function($resource){
var businesses =
$resource('http://127.0.0.1\\:3000/:business',isArray: false}
});
return businesses;
}
);
注意：我有一个GET请求，通过Rails API和POST一个从DB获取业务。
轨道4
重要
> routes.rb
match "/businesses" => "application#index",via: :options
注意：新条目匹配Angular服务器将发送的OPTIONS请求，以预先发送POST请求的开始。
> 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,OPTIONS,HEAD'
headers['Access-Control-Allow-Headers'] = '*,x-requested-with,If-Modified-Since,If-None-Match,Auth-User-Token'
headers['Access-Control-Max-Age'] = '86400'
headers['Access-Control-Allow-Credentials'] = 'true'
end
end
end
>我的Rails控制器
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
注意：这里做任何你需要的…
