跨域Ajax方法

VioletJack 發布于2019-07-01 11:13 / 3511人閱讀

摘要：原文來自跨域方法小博客經典示例原生方式做有意義的事發生錯誤做有意義的事發生錯誤跨域方案方案前端請求頁面做有意義的事發生錯誤后端響應頁面注意后端響應是方案服務端添加響應頭信息以下不支持允許所有來源訪問允許訪問的方式終極方案后端代理

原文來自 -- 跨域Ajax方法 – Eson小博客 uninote

經典Ajax示例：

XMLHttpRequest原生方式

var request = new XMLHttpRequest();
request.open("POST", "index.php");
var data = "parameter1" + encodeURIComponent(parameter_one) + "¶meter2" + encodeURIComponent(parameter_two);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
    if (request.readyState===4) {
        if (request.status===200) {
            var ret = request.responseText;
            //做有意義的事

        } else {
            alert("發生錯誤：" + request.status);
        }
    }
}

jQuery

$.ajax({
    type:"POST",
    url:"index.php",
    dataType:"json",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意義的事

    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("發生錯誤：" + jqXHR.status);
        }
    }
});

跨域Ajax方案： 方案A：JSONP

前端請求頁面：

$.ajax({
    type:"POST",
    url:"http://127.0.0.1/test/Ajax_jsonp/service.php",
    dataType:"jsonp",
    jsonp:"jsonp",
    data:{
        "parameter1":parameter_one,
        "parameter2":parameter_two
    },
    success:function(ret){
        //做有意義的事
        alert(JSON.stringify(ret));
        console.log(ret);
    },
    error:function(jqXHR){
        if (jqXHR.status!=200) {
            alert("發生錯誤：" + jqXHR.status);
        }
    }
});

后端響應頁面：

注意后端響應是GET

方案B：XHR2服務端添加響應頭信息（IE10以下不支持）

header("Access-Control-Allow-Origin:*");//允許所有來源訪問
header("Access-Control-Allow-Method:POST,GET");//允許訪問的方式

終極方案：后端代理

curl

GPU云服務器云服務器 ajax跨域 jquery ajax 跨域 ajax跨域訪問 php 跨域ajax

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

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

ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
20K前端大佬面試(關于如何回答ajax跨域問題)

摘要：在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。關于跨域，有N種類型，現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內容...

Yangyang 2019-08-02 16:09 評論0 收藏0
Ajax跨域

摘要：發布自的博客，歡迎大家轉載，但是要注意注明出處。另外，該文章收納在的個人的知識整理倉庫，歡迎投稿跨域簡介常用跨域方法跨域簡介所謂跨域指的是請求從其他的域獲取數據或者傳輸數據所謂域同源，指的是兩個服務器資源的根的域名端口協議三者完全相同，只要發布自Kindem的博客，歡迎大家轉載，但是要注意注明出處。另外，該文章收納在Kindem的個人的 IT 知識整理倉庫，歡迎 Star、Fork、...

xiaotianyi 2019-08-23 11:36 評論0 收藏0
再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用跨域請求資源時，同源策略又會成為開發者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實現使用技術跨域獲取資源，需要服務端和客戶端的協同合作。瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用AJAX跨域請求資源時，同源策略又會成為開發者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
慕課網_《Ajax跨域完全講解》學習總結

摘要：時間年月日星期三說明本文部分內容均來自慕課網。當預檢請求通過的時候，才發送真正的請求。時間：2018年04月18日星期三說明：本文部分內容均來自慕課網。@慕課網：https://www.imooc.com教學源碼：https://github.com/zccodere/s...學習源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

fredshare 2019-08-15 15:34 評論0 收藏0