AJAX跨域、使用formdata傳輸文件(傳輸截圖后的文件)、angularJS跨域

陳偉發布于2019-08-20 12:02 / 2640人閱讀

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）：

        
            
                jsonpResult
                URGOO_CALLBACK
                true

請求成功：

為什么用jsonp跨域還是報錯了!!??

(這個問題我之前也有碰到我是這么解決的；阿發昨天突然遇到了跨域問題，后來他用nodeJS解決了......厲害了word哥！！！)

如圖

控制臺拋出 Uncaught SyntaxError: Unexpected token:
其實這個時候你已經獲取到數據了
那為什么會拋出錯誤呢？
原因是因為你的callback參數名與后端所接收的參數名不一致

如何解決： 正如圖中所標記的 callback參數名，前后端保持一致就OK！

設置header方法

//PHP寫法:


//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) {
            }
        });
    
    }

GPU云服務器云服務器 js 跨域數據傳輸 asp跨域上傳文件 ajax跨域文件傳輸?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80763.html

HTTP基本知識、跨域和調試技巧

摘要：發送到后臺的數據見下圖這種方式會以鍵值對的形式通過分隔符鏈接，以字符串給后臺，可以傳輸文件，也可以傳輸普通數據。跨域跨域問題的根本問題就是同源策略，旨在防止網站被攻擊，這里不做贅述。客戶端，以為例服務端允許跨域的請求的方法。 HTTP基礎其實很多面試問HTTP的3次握手，4次揮手，我覺得價值不大，可以幫助你理解HTTP的原理，死背硬記的對于你開發沒有作用，而是去理解它就行。前端只關心...

starsfun 2019-08-23 16:55 評論0 收藏0
你不知道的 XMLHttpRequest

摘要：默認參數為空字符串密碼，可選參數，用于授權。默認參數為空字符串備注如果不是有效的方法或地址不能被成功解析，將會拋出異常如果請求方法不區分大小寫為或將會拋出異常重寫由服務器返回的類型。本文詳細介紹了 XMLHttpRequest 相關知識，涉及內容： AJAX、XMLHTTP、XMLHttpRequest詳解、XMLHttpRequest Level 1、Level 2 詳解 XHR...

ckllj 2019-08-20 15:35 評論0 收藏0
AJAX原理與CORS跨域

摘要：同源策略指的是當前頁面和目標協議域名和端口均相同。發出請求的頁面所在域。響應的頭部信息在后端處理，不在此處講解。該事件會在數據接收期間不斷觸發，但間隔不確定。服務器確認允許之后，才發起實際的請求。 ajax作為前端開發必需的基礎能力之一，你可能會使用它，但并不一定懂得其原理，以及更深入的服務器通信相關的知識。在最近兩天的整理過程中，看了大量的文章，發現自己的后端能力已經限制自己在網絡通...

jeyhan 2019-08-21 17:01 評論0 收藏0
移動端上傳圖片（ajax跨域請求）

摘要：項目開發簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數據判斷需要填寫的參數是否為空，如果不為空直接往下走，直到成功提交數據。優點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。第一次寫項目開發經驗，望擔待。除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。項目開發簡述項目需求：上傳圖片并展示。項目地址：項目的鏈接地址開發工具：su...

frontoldman 2019-08-29 11:10 評論0 收藏0