Question

我在Angular中有一个前端Web应用程序，在Rails中有后端。从前端我有javascript代码发出POST http请求：

在提交按钮上，我调用上面的功能：

$scope.onSave = function () {
        $http.post('http://localhost:3000/documents', { user: $scope.user, formData: $scope.formData }, function (response) {
            $scope.isSaved = true;
            console.log(response);
            if (response.success) {
                console.log("It has been successfully saved!")
            }
        });
}

然后我收到错误说

XMLHttpRequest无法加载http://localhost:3000/documents。响应预检请求没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3001＆＃39;因此是不允许的访问。响应的HTTP状态代码为404.

我知道我需要允许跨域访问，但我不确定如何在Rails服务器端实现这一点。

Answer 1

将rack-cors gem添加到您的Gemfile中。
将其添加到config / application.rb文件中。

config.middleware.insert_before 0, "Rack::Cors" do allow do origins '*' resource '*', :headers => :any, :methods => [:get, :post, :options] end end

Answer 2

我需要使用不同的端口地址查询在同一服务器上运行的多个API。我一直在使用“Ajax”控制器，只需通过HTTParty传递请求并以JSON呈现响应：

class AjaxController < ApplicationController

   def query
     port = params['port']
     path = params['path']
     url = "http://0.0.0.0:#{port}/#{path}"
     response = HTTParty.get(url)
     render json: response
   end

end

查询是脚本化的（例如）：

 <script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            document.getElementById("demo").innerHTML = myObj.plans;
        }
    };
    xmlhttp.open("GET", "/ajax/query?port=3005&path=items.json?state=TX",true);
    xmlhttp.send();
</script>

显然，这种方法需要得到保障，但也许会产生一些进一步的想法。

允许在Rails服务器上进行跨域访问

2 个答案: