Question

我在客户端有一个JavaScript代码段，通过跨域从另一个Rails API应用程序请求数据。

var myData = { "event": {"name": "some event name", "property": "some value"} };
var request = new XMLHttpRequest();
request.open("POST", "http://localhost:3000/api/events", true);
request.setRequestHeader('Content-Type', 'application/json');
request.send(JSON.stringify(myData));

我想知道为什么要添加 request.setRequestHeader（＆＃39; Content-Type＆＃39;，＆＃39; application / json＆＃39;）; 会导致浏览器发送 POST请求，但没有此语句，浏览器会发送 OPTIONS请求吗？

此外，运行上面的代码时，我的Rails应用程序中出现错误 ActionController :: ParameterMissing - param缺失或值为空：event：。为什么浏览器不在 myData 变量中发送数据集？

版本信息：ruby 2.1.5p273，Rails 4.1.8

# routes.rb

Rails.application.routes.draw do
  match '/api/events' => 'api/v1/events#create', via: :options
  ...
end

# app/controller/api/v1/events_controller.rb

class API::V1::EventsController < ApplicationController
  skip_before_action :verify_authenticity_token
  before_action :set_headers

  def index
    @events = Event.all
    render json: @events, status: :ok
  end

  def show
    @event = Event.find(params[:id])
    render json: @event
  end

  def create
    @event = Event.new(event_params)
    if @event.save
      render json: @event, status: :created
    else
      render @event.errors, status: :unprocessable_entity
    end
  end

  def update
    @event = Event.find(params[:id])
    if @event.update(event_params)
      raise "#{@event.name}"
      head :no_content
    else
      render @event.errors, status: :unprocessable_entity
    end
  end

  private

  def event_params
    params.require(:event).permit(:name, :property)
  end

  def set_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Expose-Headers'] = 'ETag'
    headers['Access-Control-Allow-Methods'] = 'OPTIONS' #'GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD'
    headers['Access-Control-Allow-Headers'] = '*,x-requested-with,Content-Type,If-Modified-Since,If-None-Match'
    headers['Access-Control-Max-Age'] = '1728000'
  end
end

# Rails log

Started OPTIONS "/api/events" for 127.0.0.1 at 2015-01-09 14:54:31 -0600
    Processing by API::V1::EventsController#create as */*
    Completed 400 Bad Request in 2ms

    ActionController::ParameterMissing - param is missing or the value is empty: event:
      actionpack (4.1.8) lib/action_controller/metal/strong_parameters.rb:187:in `require'
      app/controllers/api/v1/events_controller.rb:39:in `event_params'
      app/controllers/api/v1/events_controller.rb:18:in `create'
      actionpack (4.1.8) lib/action_controller/metal/implicit_render.rb:4:in `send_action'
      ...

Answer 1

浏览器发送每个跨域ajax post请求的OPTIONS请求，以检查请求是否安全。要了解更多信息，请搜索“cors”。

要解决您的问题，请从控制器中删除'set_header'before_filter和

将gem'chack-cors'添加到Gemfile
捆绑安装
将以下内容添加到config / application.rb

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

Answer 2

我会在执行时使用jQuery，因为默认情况下它在Rails的所有页面上。您可以$.post('/api/events', myData)它将为您处理一堆手动工作，并使其适用于多个浏览器。在旁注中，您不需要将key包装在引号中。

Answer 3

CORS要求对非simple请求进行预检请求。预检请求使用OPTIONS方法。具有未指定Content-Type的POST请求并不简单，因为不符合CORS的用户代理通常不会发出此类请求。

简单的POST请求只能使用某些Content-Type值。粗略地说，这些对应于<form>元素可以发送的类型。 One of these（最近添加）是application/json。

因此，如果您设置Content-Type: application/json，则浏览器不需要执行预检请求。

如何使用XMLHttpRequest对象发出post请求？

3 个答案: