无法使用内容类型开机自检：应用程序/json 从角度到轨道

Question

所以我试图使用Content-Type： Application/json从角向我的rails后端发送一个POST请求。我在控制台中收到以下错误：

angular.js:12578选项http://localhost:3000/api/student_create404（未找到）

和

XMLHttpRequest无法加载http://localhost:3000/api/student_create.对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“access control Allow Origin”标头。起源http://localhost:8008因此不允许访问。响应具有HTTP状态代码404。

注意：当我使用＜code＞内容类型：application/x-www-form-urlencoded＜code＞时，post请求正常工作

它还可以在Postman中使用头中设置的application/json内容类型。

角度控制器:

.controller('View1Ctrl', function($scope, $http) {

  var data = {
    name: "name"
  };
  $http({
    url: 'http://localhost:3000/api/student_create',
    dataType: 'json',
    method: 'POST',
    data:data,
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*"
    }
  }).then(function(response) {
    console.log(response)
  }, function(error) {
    console.log(error)
  });

});

API控制器（Rails）：

class ApiController < ApplicationController
     before_action :set_headers
     skip_before_action :verify_authenticity_token

  def set_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
    end
  def create_student
    student = StudentUser.new
    student.name= params[:name]
    student.save
    render json: "test".to_json #temporary
  end

路由： 发布 'api/student_create' =

编辑：前端已打开http://localhost:8008，后端位于本地主机：3000




Answer 1

请尝试以下操作，从如何在 Rails API 应用程序中配置 CORS 接受标头

因此，即使您的消费者在“localhost:3000”上，而您的提供商在“localhost:3001”上，响应也将被忽略，除非您的web服务设置了许可的CORS策略。此策略由提供商在HTTP响应中设置消费者应用程序（例如浏览器）要强制执行的特定CORS头来定义。例如，配置这些标头：

# in config / application.rb
config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => 'http://my-web-service-consumer-site.com',
  'Access-Control-Request-Method' => % w {
    GET POST OPTIONS
  }.join(",")
}

每个站点：

请注意，设置“访问控制允许起源”=

Answer 2

嗨，当我与Angular交互Rails时，我也遇到了这个问题。经过大量研究，我发现gem“rack-cors”解决了这个问题。您可以在此处关注它的留档。默认情况下，Rails不允许跨源资源共享。所以基本上它可以很好地处理跨源请求。

步骤:

安装宝石：

gem install rack-cors

或者在您的 Gemfile 中：

gem 'rack-cors', :require => 'rack/cors'

application.rb文件

module YourApp
  class Application < Rails::Application

    # ...

    # Rails 3/4

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

    # Rails 5

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

  end
end