如何使用 XMLHttpRequest 对象发出 post 请求?
How to make a post request with XMLHttpRequest object?
我在客户端有一个 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('Content-Type', 'application/json'); 会导致浏览器发送 POST request,但是如果没有这个语句,浏览器会发送一个 OPTIONS request 来代替?
此外,当 [=43] 时,我的 Rails 应用程序中出现错误 ActionController::ParameterMissing - 参数丢失或值为空:事件: =] 上面的代码。为什么浏览器不发送 myData 变量中的数据集?
版本信息:ruby2.1.5p273,Rails4.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'
...
我会在执行此操作时使用 jQuery,因为默认情况下它已经在所有带有 Rails 的页面上。你可以做 $.post('/api/events', myData)
它会为你处理大量的手动工作,并使其在多个浏览器上工作。另外,您 不需要 将 key
括在引号中。
CORS 需要非 simple 请求的预检请求。预检请求使用 OPTIONS 方法。 POST 未指定 Content-Type
的请求并不简单,因为不符合 CORS 的用户代理通常不会发出这样的请求。
一个简单的 POST 请求只能使用特定的 Content-Type
值。粗略地说,这些对应于 <form>
元素可以发送的类型。 One of these(最近添加)是 application/json
。
因此,如果您设置 Content-Type: application/json
,浏览器将不需要执行预检请求。
浏览器为每个跨域发送 OPTIONS 请求 ajax post 请求以检查请求是否安全。要了解更多信息,请搜索 'cors'.
要解决您的问题,请从控制器中移除 'set_header' before_filter 并移除
- 添加 gem 'rack-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
我在客户端有一个 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('Content-Type', 'application/json'); 会导致浏览器发送 POST request,但是如果没有这个语句,浏览器会发送一个 OPTIONS request 来代替?
此外,当 [=43] 时,我的 Rails 应用程序中出现错误 ActionController::ParameterMissing - 参数丢失或值为空:事件: =] 上面的代码。为什么浏览器不发送 myData 变量中的数据集?
版本信息:ruby2.1.5p273,Rails4.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'
...
我会在执行此操作时使用 jQuery,因为默认情况下它已经在所有带有 Rails 的页面上。你可以做 $.post('/api/events', myData)
它会为你处理大量的手动工作,并使其在多个浏览器上工作。另外,您 不需要 将 key
括在引号中。
CORS 需要非 simple 请求的预检请求。预检请求使用 OPTIONS 方法。 POST 未指定 Content-Type
的请求并不简单,因为不符合 CORS 的用户代理通常不会发出这样的请求。
一个简单的 POST 请求只能使用特定的 Content-Type
值。粗略地说,这些对应于 <form>
元素可以发送的类型。 One of these(最近添加)是 application/json
。
因此,如果您设置 Content-Type: application/json
,浏览器将不需要执行预检请求。
浏览器为每个跨域发送 OPTIONS 请求 ajax post 请求以检查请求是否安全。要了解更多信息,请搜索 'cors'.
要解决您的问题,请从控制器中移除 'set_header' before_filter 并移除
- 添加 gem 'rack-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