通过ajax跨域请求传输formdata,AJAX跨域、使用formdata传输文件(传输截图后的文件)、angularJS跨域...

A网站访问B网站这就是跨域

当你调用接口时，F12控制台抛出这状态时，你就跨域了(图示)

如何解决跨域呢？

解决的几种方法(我现在只用到了这两种)

JSONP

让后台的小伙伴设置header：如PHP的 header{"Access-Control-Allow-Origin: *"} (视你们后台小伙伴使用后台 语言不同，这种写法略有不同，但基本一样的。)

“*”号表示允许任何域向我们的服务端提交请求，建议换成你们自己的域名：header{"Access-Control-Allow-Origin: 你们自己的域名"}

JSONP方法(jquery版)

$.ajax({

type: "get",async: false,url: urlRode,dataType: "jsonp",data : {},//传参 你要出给后台的参数

jsonp: "URGOO_CALLBACK",//关键部分名字随便起 但要跟后台协定保持一致的名字

success: function(response,status,xhr){

console.log(response,xhr);

},error: function(){

alert('fail');

}

});

请求成功

JSONP方法(angularJS版)

$scope.getData = function (urlRoad,headData) {

var getUrl = urlRoad + "?URGOO_CALLBACK=JSON_CALLBACK";

$http({

url: getUrl,params: headData,method: 'JSONP'

}).success(function(data,header,config,status){

//响应成功

}).error(function(data,status){

//处理响应失败

});

}

重点(angularJS的callback与JQ的稍有不同)：

后台代码(我们是struts)：

class="com.luotuo.urgoo.action.login.LoginAction" method="coselorLogin">

jsonpResult

URGOO_CALLBACK

true

请求成功：

为什么用jsonp跨域还是报错了!!??

(这个问题我之前也有碰到我是这么解决的；阿发昨天突然遇到了跨域问题，后来他用nodeJS解决了......厉害了word哥！！！)

如图

控制台抛出 Uncaught SyntaxError: Unexpected token:

其实这个时候你已经获取到数据了

那为什么会抛出错误呢？

原因是因为你的callback参数名与后端所接收的参数名不一致

如何解决： 正如图中所标记的 callback参数名，前后端保持一致就OK！

设置header方法

//PHP写法:

header{"Access-Control-Allow-Origin: *"}

?>

//Java 同PHP的差不多

//struts写法：

HttpServletResponse response = ServletActionContext.getResponse();

response.setHeader("Access-Control-Allow-Origin","*");

设置了header后就可以直接用普通的$.get() $.post()直接访问接口了

跨域如何传输文件如file、blob

在我现阶段的认知和能力里面：用JSONP方法处理跨域无法传输文件数据(请勿打脸，给位看客老爷！)，所以我用的是让后台设置header，然后运用HTML5的formdata对象实现传输文件的。

关键部分：processData: false,contentType: false 一定要加不然会报错

function screenShot (blob) {

var dataHead = new FormData(); //创建一个formdata对象

dataHead.append('token',token); //赋值

dataHead.append('file',blob);

$.ajax({

url: url,data: dataHead,type: "POST",dataType : 'json',async:false,processData: false,//一定要写

contentType: false,//一定要写

enctype: 'multipart/form-data',success: function(data) {

},error: function(data,e) {

}

});

}

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。