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,status,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,header,config,status){
//处置惩罚相应失利
});
}
重点(angularJS的callback与JQ的稍有差别):
背景代码(我们是struts):
<action name="coselorLogin"
class="com.luotuo.urgoo.action.login.LoginAction" method="coselorLogin">
<result name="success" type="json">
<param name="root">jsonpResult</param>
<param name="callbackParameter">URGOO_CALLBACK</param>
<param name="noCache">true</param>
</result>
</action>
要求胜利:
为何用jsonp跨域照样报错了!!??
(这个题目我之前也有遇到我是这么处置惩罚的;阿发昨天倏忽遇到了跨域题目,厥后他用nodeJS处置惩罚了……厉害了word哥!!!)
如图
控制台抛出 Uncaught SyntaxError: Unexpected token:
实在这个时刻你已获取到数据了
那为何会抛出毛病呢?
缘由是因为你的callback参数名与后端所吸收的参数名不一致
怎样处置惩罚: 正如图中所标记的 callback参数名,前后端保持一致就OK!
设置header要领
//PHP写法:
<?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, status, e) {
}
});
}