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