正文 

当前位置： 首页 > 问答 >

jquery.form 和跨域请求

     2023-05-09     282

关键词：

【中文标题】jquery.form 和跨域请求【英文标题】：jquery.form and cross-domain requests 【发布时间】：2011-07-01 06:34:54 【问题描述】：

我很难通过跨域请求创建jquery.form。我在使用 Firefox 和 Chrome 时遇到问题（甚至还没有尝试过 IE）。

解释：我的整个网站都位于http://www.mysite.com 内。但是，我的联系表格在另一台服务器上，由 http://contact.mysite.com 引用。我认为将它放在子域上会回避有关跨域请求的问题，但显然事实并非如此。 http://contact.mysite.com 在 Sinatra 中实现。

我的 javascript 设置没有什么花哨的。表单的action指向http://contact.mysite.com，方法是POST：

<form id="contact" action="http://contact.mysite.com/" method="post">

jquery.form 配置了ajaxForm 调用：

$(document).ready(function() 

  $('#contact').ajaxForm(
    success: function()  $('#success').fadeIn("slow"); ,
    error: function()   $('#error').fadeIn("slow"); 
  );

);

我遇到的第一个问题是 Firefox 3.5 - 显然它发送了一个 OPTIONS 请求，期望服务器提供特定的答案。我使用this question 来配置我的 Sinatra 应用程序，使其达到预期效果（似乎更新版本的 sinatra 包含一个选项动词）：

require 'rubygems'
require 'sinatra'
require 'pony'

# patch sinatra so it handles options requests - see https://***.com/questions/4351904/sinatra-options-http-verb
configure do
  class << Sinatra::Base
    def options(path, opts=, &block)
      route 'OPTIONS', path, opts, &block
    end
  end
  Sinatra::Delegator.delegate :options
end

# respond to options requests so that firefox can do cross-domain ajax requests
options '/' do
  response['Access-Control-Allow-Origin'] = '*'
  response['Access-Control-Allow-Methods'] = 'POST'
  response['Access-Control-Max-Age'] = '2592000'
end

post '/' do
  # use Pony to send an email
  Pony.mail(...)
end

使用 jquery 1.4.3，我在 firebug 上看到一个 OPTIONS 请求，然后是一个 POST 请求（状态 200。电子邮件已发送）。使用 jquery 1.3.2 或 1.5，仅显示 OPTIONS 请求（未发送电子邮件）。

尽管如此，error 回调总是会在我尝试过的所有版本的 jquery 中触发。我将其追溯到$.ajax(...) 调用，所以我不确定这个问题是来自 jquery.form 还是 jquery 本身。

我尝试注销来自错误的信息：

$('#contact').ajaxForm(
  success: function()  $('#success').fadeIn("slow"); ,
  error: function(jqXHR, textStatus, errorThrown) 
    console.log(jqXHR.status);
    console.log(jqXHR.statusText);
  
);

jquery 1.4.3 上的输出（在发送 OPTIONS 和 POST 请求后，状态均为 200）：

0
(empty string)

jquery 1.5 上的输出（在 OPTIONS 返回 200 状态后；从不发送 POST）

302
error

我真的迷路了。

是否有插件可以处理这个问题？ 我是否在某处遗漏了什么？

任何帮助将不胜感激。

【问题讨论】：

【参考方案1】：

AJAX 请求无法跨域执行（UPD: 不再适用，所有现代浏览器都支持CORS），但您可以改用 JSONP。虽然 JSONP 可以跨域工作，但它不能用于 POST 请求，您需要将表单的方法更改为 get 并使用：

$('#contact').ajaxForm(
  success: function()  $('#success').fadeIn("slow"); ,
  error: function()   $('#error').fadeIn("slow"); ,
  dataType: 'jsonp'
);

上述解决方案依赖于您的服务器以有效的 jsonp 响应进行响应，否则将不会执行 success 处理程序。例如：response.write(request.callback + '(' + result.to_json + ')')

最新版本的 jQuery 可以在没有 ajaxForm 插件的情况下序列化表单。如果你不需要文件上传，你可以使用这个：

$('form').submit(function() 
  var url = $(this).attr('action')
  var params = $(this).serialize()
  $.getJSON(url + '?' + params + "&callback=?", function(data) 
    // success
  )
  return false
);

【讨论】：

感谢您的回答。我仍在努力解决这个 jsonp 业务。一个问题认为： $.ajax 似乎能够执行 jsonp 请求（或者它在文档中说，我仍然不确定它是如何工作的）。既然jquery.form内部使用了$.ajax，那它不也可以使用jsonp吗？ 你知道吗，我查看了 $.ajaxForm 源代码，我认为它可以做到。我现在无法尝试该示例，但我希望它有效。 查看我的新更新，我测试过，如果您从服务器返回有效的 json 响应，它可以正常工作。 JSONP 通过将 您的解决方案效果很好。我最终放弃了 jquery.form 并直接使用 getJSON（你需要用+ '?' + 替换+ '/' +；我已经在你的答案中改变了）【参考方案2】：

我认为 JSONP 是唯一可以跨域的 AJAX 请求。

http://en.wikipedia.org/wiki/JSON#JSONP

【讨论】：

感谢您的回答。这不是一个完整的答案，但至少给了我一个提示。我会调查 JSONP。【参考方案3】：

您还可以使用本地代理 URL 来执行请求，因为服务器通常可以使用 HttpRequest 或 cURL 等方式进行跨域调用。所以基本上你使用 ajax 对本地域上的 URL 进行调用，然后将请求转发到跨域 URL，并将来自 HttpRequest/cURL 的响应在本地域的响应中传递回浏览器。

【讨论】：

这不是我当前设置的选项。服务于主应用程序的服务器不受我的控制。无论如何感谢您的回答。【参考方案4】：

经过大量的战斗，在 Alexey 的帮助下，我终于战胜了它。这是我现在的解决方案：

Javascript（直接使用jquery，不用jquery.form）：

$(document).ready(function() 
  $('#contact').submit(function() 
    $('#success').fadeOut("slow");
    $('#bademail').fadeOut("slow");

    var url = $(this).attr('action')
    var params = $(this).serialize()
    $.getJSON(url + '?' + params + "&callback=?", function(data) 
      if(data == true)  // success
        $('#success').fadeIn("slow");
        $('#contact')[0].reset();
       else  // error
        $('#bademail').fadeIn("slow");
      
    );

    return false;
  );
);

对于 Sinatra，我使用了 sinatra-jsonp gem。我让 get 操作返回“true”或“false”，具体取决于是否可以发送电子邮件（例如，对于无效的电子邮件地址）。

require 'rubygems'
require 'sinatra'
require 'sinatra/jsonp'
require 'pony'


get '/' do

  # check for blanks, etc
  return jsonp false unless fields_valid(params)

  Pony.mail(
    ...
  )

  return jsonp true

end

【讨论】：

SignalR 核心和跨域请求的问题

】SignalR核心和跨域请求的问题【英文标题】：IssuewithSignalRcoreandcrossdomainrequests【发布时间】：2018-07-3109:02:35【问题描述】：我们将SignalR核心与CORS跨域请求一起使用。客户端无法连接到服务器。401UnauthorizedNoAccess-Control-Allow-Origin\... 查看详情

AngularJS和跨域请求被阻止[关闭]

】AngularJS和跨域请求被阻止[关闭]【英文标题】：AngularJS&Cross-OriginRequestBlocked[closed]【发布时间】：2014-11-1006:53:43【问题描述】：有什么帮助吗？当我尝试从服务器获取数据时显示此错误。我的Angular应用程序在我的本地计算机... 查看详情

一篇搞定vue请求和跨域

　　vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现　　axios是一个基本Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护 axios发送AJAX请求　　安装axiosnpminstal... 查看详情

获取 API、自定义请求标头、CORS 和跨域重定向

】获取API、自定义请求标头、CORS和跨域重定向【英文标题】：FetchAPI,customrequestheaders,CORS,andcross-originredirects【发布时间】：2017-03-2715:04:24【问题描述】：我需要在浏览器中使用自定义请求标头发出HTTPGET请求，并在结果流入时对... 查看详情

获取 API、自定义请求标头、CORS 和跨域重定向

】获取API、自定义请求标头、CORS和跨域重定向【英文标题】：FetchAPI,customrequestheaders,CORS,andcross-originredirects【发布时间】：2017-03-2715:04:24【问题描述】：我需要在浏览器中使用自定义请求标头发出HTTPGET请求，并在结果流入时对... 查看详情

AngularJS 和跨域 POST

】AngularJS和跨域POST【英文标题】：AngularJSandCrossDomainPOST【发布时间】：2013-10-2100:28:39【问题描述】：我对带有HTTP授权标头的CORS请求有疑问：在我看来，网络浏览器没有发送带有POST请求的授权标头，有什么办法解决这个问题吗... 查看详情

springboot自定义拦截器和跨域配置冲突

参考技术A在我们使用springboot中，难免遇到前后端分离的场景，因此也带来的问题是跨域请求，虽然springboot在配置跨域请求中非常方便，但是如果投跨域场景和自定义拦截器一起使用的话，那就没那么顺利了。二者功能会有冲突... 查看详情

将值从 c# 传递到 actionscript 3 和跨域问题

】将值从c#传递到actionscript3和跨域问题【英文标题】：Passingvaluesfromc#toactionscript3andcrossdomainquestions【发布时间】：2017-08-1100:55:14【问题描述】：我有一个想用于游戏服务器的C#控制台应用程序正在编写的客户端是as3。稍后我将把s... 查看详情

thinkphp6.0路由的域名和跨域请求(代码片段)

本节课我们来学习一下路由的域名操作和跨域请求问题；一．域名路由1.要使用域名路由，首先，在本地我们需要通过hosts文件来映射；2.打开C:\\Windows\\System32\\drivers\\etc找到hosts文件；3.在末尾添加一句࿱... 查看详情

web服务(同域和跨域)

参考技术A注:使用XMLHttpRequest获取数据的模式也成为Ajax当应用所在同一个域托管数据时，XMLHttpRequest是为应用获取数据的一种好的方法。当为第三方获取数据，需要用到JSONP（JSONwithPadding）Web服务允许你指定一个回调函数。指定URL... 查看详情

CefSharp 和跨域

...因此网络浏览器使用file://协议打开页面。页面转换是用jQuery(ajax)实现的，我得到一个XMLHttpRequestcannotloadfile:///XXXXX 查看详情

同源策略和跨域解决方案cors(代码片段)

文章目录同源策略CORS简介CORS请求模型SpringBoot实现CORS显示设置头部注解@CrossOrigin全局配置同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则... 查看详情

同源策略和跨域解决方案cors(代码片段)

文章目录同源策略CORS简介CORS请求模型SpringBoot实现CORS显示设置头部注解@CrossOrigin全局配置同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则... 查看详情

同源策略和跨域解决方案cors(代码片段)

文章目录同源策略CORS简介CORS请求模型SpringBoot实现CORS显示设置头部注解@CrossOrigin全局配置同源策略同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则... 查看详情

springsecurity---跨域访问和跨站攻击问题详解(代码片段)

SpringSecurity---跨域访问问题详解什么是跨域访问跨域访问的解决方案有哪些？第一类方案：前端解决方案第二类方案：使用代理第三类方案：CORSCORS简述Spring-CORS规则基础配置SpringBoot下实现CORS的四种方式使用CorsFilt... 查看详情

Websocket 和跨域

】Websocket和跨域【英文标题】：Websocketandcross-domain【发布时间】：2014-07-2417:52:09【问题描述】：目前，我正在开发两个webapp：核心，用Java和Vert.x开发，从许多其他应用程序接收数据并将其发送到客户端）客户端，用PHP/JS开发，... 查看详情

什么是完整性和跨域属性？

】什么是完整性和跨域属性？【英文标题】：Whataretheintegrityandcrossoriginattributes?【发布时间】：2015-11-0910:50:05【问题描述】：Bootstrapcdn最近更改了他们的链接。现在看起来像这样：<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/cs... 查看详情

同源和跨域(代码片段)

理解什么是同源，跨域同源：域名、协议、端口完全相同。跨域：域名、协议、端口有其中的一样不同。什么是同源策略同协议、同domain（或ip）、同端口，视为同一个域，一个域内的脚本仅仅具有本域内的权限。理解：本域脚... 查看详情