成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

AJAX跨域簡(jiǎn)單講解【Python版】

xiaochao / 1715人閱讀

摘要：結(jié)果如圖所示，第二個(gè)由于跨域仍然報(bào)錯(cuò)，第三個(gè)則正常輸出在中修改也可以通過(guò)向?yàn)g覽器返回特定響應(yīng)頭，告訴瀏覽器它是允許被跨域調(diào)用的，使用的添加和兩個(gè)字段，更新如下將的方法請(qǐng)求的接口改為，依次點(diǎn)擊，第二個(gè)已經(jīng)可以正常輸出內(nèi)容

總結(jié)自慕課網(wǎng)：ajax跨域完全講解，并且原視頻中后臺(tái)為JAVA，這里改成了Python。

什么是AJAX跨域

只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域，不同域之間的請(qǐng)求就是跨域操作。AJAX跨域就是AJAX在A域下對(duì)B域發(fā)送了請(qǐng)求，一般情況下會(huì)被瀏覽器禁止。

例如，后臺(tái)開(kāi)啟兩個(gè)Flask服務(wù)器ServerA(port=8080)和ServerB(port=8081)：
ServerA.py代碼如下：

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/get")
def get():
    return "get8080 ok"

if __name__ == "__main__":
    app.run(port=8080)

ServerB.py代碼如下：

from flask import Flask

app = Flask(__name__)


@app.route("/get")
def get():
    return "get8081 ok"

if __name__ == "__main__":
    app.run(port=8081)

index.html使用jQuery發(fā)送ajax請(qǐng)求，代碼如下：




    Index



Test

因此GET 8080和GET 8081兩個(gè)按鈕是分別向8080/8081端口發(fā)送請(qǐng)求，并將結(jié)果打印在控制臺(tái)。開(kāi)啟兩個(gè)服務(wù)器，在瀏覽器輸入127.0.0.1:8080進(jìn)入index頁(yè)面，打開(kāi)Chrome控制臺(tái)并依次點(diǎn)擊，結(jié)果如圖：

可以看到GET 8080正常輸出，而由于8081端口的請(qǐng)求屬于跨域，瀏覽器報(bào)錯(cuò)并未正常打印結(jié)果。

如何處理AJAX跨域問(wèn)題
1.關(guān)閉瀏覽器安全策略

禁止跨域的AJAX請(qǐng)求，是瀏覽器本身的安全策略，實(shí)際上后臺(tái)并沒(méi)有限制，例如點(diǎn)擊GET 8081后，可以在NETWORK中看到這個(gè)請(qǐng)求本身是OK的：

因此只要關(guān)閉瀏覽器的安全策略即可，方式之一是在命令行中使用

"chrome.exe路徑" --disable-web-security --user-data-dir=D:	emp

打開(kāi)瀏覽器，此時(shí)瀏覽器會(huì)有安全性提示，依次點(diǎn)擊兩個(gè)按鈕，結(jié)果如圖：

??

2.使用JSONP

AJAX請(qǐng)求受到跨域的限制，其請(qǐng)求類型是xhr，但html頁(yè)面在引用別的域的JS腳本時(shí)卻可以正常訪問(wèn)，這種請(qǐng)求的類型是script，如圖：

JSONP的原理就是將原本的xhr請(qǐng)求替換為script請(qǐng)求，例如假設(shè)原先xhr請(qǐng)求返回的是數(shù)據(jù)A，JSONP請(qǐng)求會(huì)附帶一個(gè)callback參數(shù)說(shuō)明本地使用的回調(diào)函數(shù)，假設(shè)為func1，后端收到這個(gè)JSONP請(qǐng)求，返回的是JS代碼func1(A)。使用JSONP需要對(duì)前后端都做修改。在此不演示~

??

3.在ServerA中修改

我們可以讓后臺(tái)服務(wù)器代替瀏覽器去請(qǐng)求跨域的接口，并將數(shù)據(jù)通過(guò)本域的接口返回給瀏覽器，使瀏覽器不再發(fā)送跨域請(qǐng)求。例如在ServerA.py中增加一個(gè)接口如下：

@app.route("/get_8081_through_8080")
def get2():
    return requests.get("http://127.0.0.1:8081/get").text

index.html增加一個(gè)button，如下：

此時(shí)對(duì)瀏覽器而言get3()就不屬于跨域的請(qǐng)求了，后臺(tái)代替瀏覽器向8081發(fā)送了請(qǐng)求。
結(jié)果如圖所示，第二個(gè)button由于跨域仍然報(bào)錯(cuò)，第三個(gè)button則正常輸出：

??

4.在ServerB中修改

ServerB也可以通過(guò)向?yàn)g覽器返回特定響應(yīng)頭，告訴瀏覽器它是允許被跨域調(diào)用的，使用flask的make_response添加Access-Control-Allow-Origin和Access-Control-Allow-Methods兩個(gè)字段，ServerB.py更新如下：

from flask import Flask, Response
app = Flask(__name__)

@app.route("/get")
def get():
    return "get8081 ok"

@app.route("/get2")
def get2():
    resp = Response("get8081 ok by Access-Control-Allow")
    resp.headers["Access-Control-Allow-Origin"] = "http://127.0.0.1:8080"
    resp.headers["Access-Control-Allow-Methods"] =  "GET"
    return resp


if __name__ == "__main__":
    app.run(port=8081)

將index.html的get2()方法請(qǐng)求的接口改為"http://127.0.0.1:8081/get2"，依次點(diǎn)擊button，第二個(gè)button已經(jīng)可以正常輸出內(nèi)容：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/41657.html

相關(guān)文章

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • AJAX跨域完全講解

    摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時(shí)候其實(shí)就已經(jīng)有過(guò)跨域的問(wèn)題的了，當(dāng)時(shí)候知道了為什么會(huì)存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來(lái)。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時(shí)候其實(shí)就已經(jīng)有過(guò)AJAX跨域...

    alexnevsky 評(píng)論0 收藏0

  • AJAX跨域完全講解

    摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時(shí)候其實(shí)就已經(jīng)有過(guò)跨域的問(wèn)題的了，當(dāng)時(shí)候知道了為什么會(huì)存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來(lái)。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時(shí)候其實(shí)就已經(jīng)有過(guò)AJAX跨域...

    i_garfileo 評(píng)論0 收藏0

  • 慕課網(wǎng)_《Ajax跨域完全講解》學(xué)習(xí)總結(jié)

    摘要：時(shí)間年月日星期三說(shuō)明本文部分內(nèi)容均來(lái)自慕課網(wǎng)。當(dāng)預(yù)檢請(qǐng)求通過(guò)的時(shí)候，才發(fā)送真正的請(qǐng)求。 時(shí)間：2018年04月18日星期三說(shuō)明：本文部分內(nèi)容均來(lái)自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學(xué)源碼：https://github.com/zccodere/s...學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

    fredshare 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<