关于跨域GET、POST请求的小结

重点:跨域POST大量数据;

JQuery:$.ajax/$.getJSON支持jsonp格式的跨域,但是只支持GET方式,暂不支持POST;

CORS:w3c关于跨域的新方案,res.setHeader(‘Access-Control-Allow-Origin‘,‘*‘),兼容IE9+;

so,跨域POST是个值得研究的问题啊!万能的JQuery无法跨域POST;鉴于基本国情,CORS也只是适合在移动端玩玩;

相信有同学这样做过:

 1         $.ajax({
 2             type: ‘post‘,
 3             url: url,
 4             data: {a:1,b:2},
 5             dataType: "jsonp",
 6             crossDomain: true,
 7             jsonpCallback: "sucCallback",
 8             success: function (data) {
 9                 console.log(data);
10             },
11             error: function (data) {
12                 console.log(data);
13             }
14         });

实际上chrome的控制台显示却是这样的:

那么,如图是否可以证明jQuery确实无法跨域POST呢?说好的POST呢,jQuery自动将其转为GET了;这样其实就和$.getJSON差不多了,只是$.ajax的跨域直接能回调返回值,而$.getJSON的返回值需要一个全局的callback(可自定义);

话说我的个人小站在移动端还处于最原始的缩放状态,说好的H5 Response Web呢?原谅我再一次跑偏了:原本计划<link rel="stylesheets" type="css/text" media="screen and (max-width:xx-px)" href="max-xx.css" />或者直接在原有样式表里media query;而结果却是我新开了个站点,作为移动端的版本,读取PC端存储的数据;一方面减轻代码量,使移动端更轻量简洁,毕竟只是个博客嘛;另一方面,这样的话,移动端将有更宽广的随意挥洒的空间;再者,基于性能优化,这样也不错;当然,问题也很明显了;两个站点要共享数据,连同一个数据库,要做同步操作,呵呵,我一个小前端,这些貌似目前想太多啊!那么怎么办呢,是的,就是上面说到的问题,前端跨域请求数据;

移动端的库用的是由zepto的一些模块自定义组装的一个版本,bootstrap什么的一边凉快凉快吧,样式手写的,权当练手吧。。。在后端,由Nodejs的http-proxy做代理,判断请求的UA,如果是移动端的访问,则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理,这样在手机上访问http://www.famanoder.com就不用做跳转了;

OK,那么要开始跨域请求和提交数据了;如果只是请求远程数据,GET方式足矣;可是如果要提交大量数据,比如,某大侠路过小站,一时兴起,引经据典,古今中外,滔滔不绝,长篇大论一通,这样的话恐怕GET搞不定啊!先看看最简单的GET方式吧:

1 $.getJSON(‘http://www.famanoder.com /page/ajaxPage?callback=?&jsonpCallback=getmore&page=3&ori=about‘);

然后定义好全局的getmore就OK了,后端处理也简单,我这是Nodejs,其他的自行百度吧:

1 Artical.find({},function(err,docs){
2     err&&console.log(err);
3     var d=JSON.stringify(docs);
4     res.send(callback+"("+d+")");
5 });

当然像上图里那样也是可以的,后端同样处理;

前面说了,伟大的JQuery暂时不支持POST方式的跨域;那咋办呢?其实没有想象的那么复杂,是时候证明你不能太依赖JQuery了,有时候没有她,你也要好好过;

基本原理大概是这样的:form表单提交,无论你是post,还是get,无论你提交到哪,只要后端有对应程序处理,都妥妥的,不存在跨域一说;以前无刷新上传、提交表单都是将form的target指向一个空iframe,此处同理;类似:a.com提交表单到b.com,表单的target为一个空iframe;b.com处理请求,在response里执行callback,注意,此处callback是属于那个空iframe的;

1 <!-- a.html -->
2 <!-- test post access domain -->
3 <!-- use form and hide iframe -->
4 <form action="b.com" method="post" target="hidefrm">
5     <input type="text" value="test post data access domain">
6     <input type="submit" value="submit">
7 </form>
8 <iframe src="" name="hidefrm" frameborder="0"></iframe>

后端的处理基本一样;如果不出意料,到此,请求会在控制台出现一片红,是的,要你设置domain;除了页面和对应js要设置domain外,一定别忘啦,response里的callback其实是属于当前页面的,所以response里执行的callback也要设置domain;类似这样:

1 res.send(‘document.domain="a.com";window.parent.aa(‘+str+‘)‘);
时间: 2024-10-12 15:38:46

关于跨域GET、POST请求的小结的相关文章

妥善的ajax跨域提交post请求的解决方案,结合PHP与jquery

开发背景: 在开发中采用了一个新的架构,将大部分客户的留言功能集成到一个公共API提交保存,采用不同的用户名区分,供客户查询自己网站的留言,这样节约了客户网站的资源,也提升了维护性. 那么在提交时不能采用直接的post提交,否则会产生跳转,使访客混乱,所以采用ajax提交留言内容至公共服务器:http://wx.igooda.cn/index.php/messagesave,但尝试后发现不能提交post请求,百度后查询结果是跨域只能是get请求,这对留言内容多的来说,是不可行的.还有一种解决方案

跨域发送HTTP请求详解

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能是GET) 二,采用CROS的方式(需要在接收的一端也有配置) 三,采用form表单的方式(有些时候会存在问题,一会详细说明) 四,采用代理网站帮忙转(不推荐,不安全,性能低,不做解释) 五,后台JAVA后端通过net方式发送 一,jsonP的方式: $.ajax({ url: "http://lo

中止请求和超时 跨域的HTTP请求 认证方式 JSONP

中止请求和超时 一个栗子在上传多少秒以后直接终止请求 // 发起HTTP GEt请求获取指定URl的内容 // 如果响应成功到达,将会传入responseText给回调函数 // 如果响应在timeout毫秒内没有到达,将会中止这个请求 function timedGetText(url, timeout, callback) { var request = new XMLHttpRequest(); // 创建新请求 var timedout = false; // 是否超时,设置标志 //

记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也是我开发的,因此我将域名a加到了该服务的HTTP响应结构的头文件里,这样就允许了域名a上的JavaScript代码用AJAX访问域名b的服务. 域名b上的服务是一个Servlet,允许域名a跨域访问的代码就一行: protected void doGet(HttpServletRequest req

解决jquery ajax在跨域访问post请求的时候,ie9以下无效(包括ie9)的问题

最近在做项目的时候遇到一个问题,就是跨域请求ajax的时候ie9以下的浏览器不可以访问,直接执行error里面的代码,但是也不报错,就上网查了查,发现了一个很好用的方法,在这里记录一下,也希望可以帮到大家. 第一步:设置浏览器安全属性,启用[通过域访问数据源]选项: 1.选择Internet选项 2.选择安全---自定义级别 3.找到其他---通过域访问数据源,选择启用,然后确定就可以了. 第二步:调用ajax方法时,设置crossDomain为相反的值.原文链接:https://bugs.jq

用express实现CORS跨域(上-简单请求)

今天遇到了一个跨域请求登录验证的问题.所以有了尝试跨域的机会. 具体情景是,有一个登录界面写在名叫cas的站点上,但是相关的登录验证的后台接口是写在名叫earth的站点. 首先的反应是使用jsonp,但是jsonp只能get请求,而且一旦跨域会有权限问题(这个下面会说),更主要的是jsonp那种类似hack的写法总让我觉得别扭.当然最主要的是后台用stringMVC已经实现了CORS. CORS是一种跨域资源共享的方式,和ajax实际上是没什么区别的,相对应的RESTFUL方法们都是可以的,实现

Java - Spring MVC 实现跨域资源 CORS 请求

拦截器设置响应头 这种方式原理就是利用拦截器在方法执行前,我们增加请求的响应头,用来支持跨域请求.这种方案是可行的,大部分都是采用这种方案.我当时也是打算采用这种方案,直到我发现原来 Spring 框架已经支持了 CORS 之后,就果断采用了 Spring 框架的内置的方案,其实原理也是一样的. 直接配置即可: <!-- API 接口跨域配置 --> <mvc:cors> <mvc:mapping path="/api/**" allowed-origin

cors跨域之简单请求与预检请求(发送请求头带令牌token)

跨域浏览器请求应该是可以发出的,服务器不响应这种请求,同时跨域标准还要求浏览器不接受不同域名的服务器发来的响应.个人猜测 预检请求(option):在 CORS 中,可以使用 OPTIONS 方法发起一个预检请求(一般都是浏览检测到请求跨域时,会自动发起),以检测实际请求是否可以被服务器所接受.预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法:Access-Control-Request-Headers 首部字段告知

php+ajax简单实现跨域(http+https)请求调用

当一个网站 a站 需要调用另一个网站 b站 列表文章时 比如:www.a123.com 调用 www.b456.com 文章 在 a站 建立php文件获取 b站 资源文章到本地后,再传递a站前端 在网站 b456 下Doc文件为 <ul class="ls_wz"> <li><a href="#" target="_blank" title="title1" >内容1</a>&l

Springboot跨域 ajax jsonp请求

SpringBoot配置: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> @SuppressWarnings("deprecation") @Configuration public class CorsFilter ext