資訊專欄INFORMATION COLUMN
A網(wǎng)站訪問B網(wǎng)站這就是跨域
當你調(diào)用接口時，F(xiàn)12控制臺拋出這狀態(tài)時，你就跨域了（圖示）
如何解決跨域呢？
解決的幾種方法（我現(xiàn)在只用到了這兩種）
JSONP
讓后臺的小伙伴設(shè)置header：如PHP的 header{"Access-Control-Allow-Origin: *"} （視你們后臺小伙伴使用后臺 語言不同，這種寫法略有不同，但基本一樣的。）
“*”號表示允許任何域向我們的服務(wù)端提交請求，建議換成你們自己的域名：header{"Access-Control-Allow-Origin: 你們自己的域名"}
$.ajax({
type: "get",
async: false,
url: urlRode,
dataType: "jsonp",
data : {}, //傳參 你要出給后臺的參數(shù)
jsonp: "URGOO_CALLBACK", //關(guān)鍵部分名字隨便起 但要跟后臺協(xié)定保持一致的名字
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){
//響應(yīng)成功
}).error(function(data,header,config,status){
//處理響應(yīng)失敗
});
}
重點（angularJS的callback與JQ的稍有不同）：
后臺代碼（我們是struts）：
jsonpResult URGOO_CALLBACK true
請求成功：
(這個問題我之前也有碰到我是這么解決的；阿發(fā)昨天突然遇到了跨域問題，后來他用nodeJS解決了......厲害了word哥！??！)
如圖
控制臺拋出 Uncaught SyntaxError: Unexpected token:
其實這個時候你已經(jīng)獲取到數(shù)據(jù)了
那為什么會拋出錯誤呢？
原因是因為你的callback參數(shù)名與后端所接收的參數(shù)名不一致
如何解決： 正如圖中所標記的 callback參數(shù)名，前后端保持一致就OK！
//PHP寫法:
//Java 同PHP的差不多
//struts寫法：
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Access-Control-Allow-Origin", "*");
設(shè)置了header后就可以直接用普通的$.get（） $.post（）直接訪問接口了
跨域如何傳輸文件如file、blob在我現(xiàn)階段的認知和能力里面：用JSONP方法處理跨域無法傳輸文件數(shù)據(jù)（請勿打臉，給位看客老爺?。?，所以我用的是讓后臺設(shè)置header，然后運用HTML5的formdata對象實現(xiàn)傳輸文件的。
關(guān)鍵部分：processData: false, contentType: false 一定要加不然會報錯 function screenShot (blob) {
var dataHead = new FormData(); //創(chuàng)建一個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) {
}
});
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80763.html
摘要：發(fā)送到后臺的數(shù)據(jù)見下圖這種方式會以鍵值對的形式通過分隔符鏈接，以字符串給后臺，可以傳輸文件，也可以傳輸普通數(shù)據(jù)?？缬蚩缬騿栴}的根本問題就是同源策略，旨在防止網(wǎng)站被攻擊，這里不做贅述?？蛻舳?，以為例服務(wù)端允許跨域的請求的方法。 HTTP基礎(chǔ) 其實很多面試問HTTP的3次握手，4次揮手，我覺得價值不大，可以幫助你理解HTTP的原理，死背硬記的對于你開發(fā)沒有作用，而是去理解它就行。前端只關(guān)心...
摘要：默認參數(shù)為空字符串密碼，可選參數(shù)，用于授權(quán)。默認參數(shù)為空字符串備注如果不是有效的方法或地址不能被成功解析，將會拋出異常如果請求方法不區(qū)分大小寫為或?qū)伋霎惓Ｖ貙懹煞?wù)器返回的類型。 本文詳細介紹了 XMLHttpRequest 相關(guān)知識，涉及內(nèi)容： AJAX、XMLHTTP、XMLHttpRequest詳解、XMLHttpRequest Level 1、Level 2 詳解 XHR...
摘要：同源策略指的是當前頁面和目標協(xié)議域名和端口均相同。發(fā)出請求的頁面所在域。響應(yīng)的頭部信息在后端處理，不在此處講解。該事件會在數(shù)據(jù)接收期間不斷觸發(fā)，但間隔不確定。服務(wù)器確認允許之后，才發(fā)起實際的請求。 ajax作為前端開發(fā)必需的基礎(chǔ)能力之一，你可能會使用它，但并不一定懂得其原理，以及更深入的服務(wù)器通信相關(guān)的知識。在最近兩天的整理過程中，看了大量的文章，發(fā)現(xiàn)自己的后端能力已經(jīng)限制自己在網(wǎng)絡(luò)通...
摘要：項目開發(fā)簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數(shù)據(jù)判斷需要填寫的參數(shù)是否為空，如果不為空直接往下走，直到成功提交數(shù)據(jù)。優(yōu)點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。 第一次寫項目開發(fā)經(jīng)驗，望擔待。除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。 項目 開發(fā)簡述 項目需求：上傳圖片并展示。項目地址：項目的鏈接地址開發(fā)工具：su...
閱讀 3264·2021-11-04 16:09
閱讀 3276·2021-09-23 11:49
閱讀 3763·2021-09-09 09:33
閱讀 3776·2021-08-18 10:22
閱讀 2113·2019-08-30 15:55
閱讀 3693·2019-08-30 15:53
閱讀 2724·2019-08-28 18:08
閱讀 957·2019-08-26 18:18
