資訊專欄INFORMATION COLUMN
摘要：結(jié)果如圖所示，第二個由于跨域仍然報錯，第三個則正常輸出在中修改也可以通過向瀏覽器返回特定響應(yīng)頭，告訴瀏覽器它是允許被跨域調(diào)用的，使用的添加和兩個字段，更新如下將的方法請求的接口改為，依次點(diǎn)擊，第二個已經(jīng)可以正常輸出內(nèi)容
總結(jié)自慕課網(wǎng)：ajax跨域完全講解，并且原視頻中后臺為JAVA，這里改成了Python。
只要協(xié)議、域名、端口有任何一個不同，都被當(dāng)作是不同的域，不同域之間的請求就是跨域操作。AJAX跨域就是AJAX在A域下對B域發(fā)送了請求，一般情況下會被瀏覽器禁止。
例如，后臺開啟兩個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請求，代碼如下：
Index
Test
因此GET 8080和GET 8081兩個按鈕是分別向8080/8081端口發(fā)送請求，并將結(jié)果打印在控制臺。開啟兩個服務(wù)器，在瀏覽器輸入127.0.0.1:8080進(jìn)入index頁面，打開Chrome控制臺并依次點(diǎn)擊，結(jié)果如圖：
可以看到GET 8080正常輸出，而由于8081端口的請求屬于跨域，瀏覽器報錯并未正常打印結(jié)果。
禁止跨域的AJAX請求，是瀏覽器本身的安全策略，實際上后臺并沒有限制，例如點(diǎn)擊GET 8081后，可以在NETWORK中看到這個請求本身是OK的：
因此只要關(guān)閉瀏覽器的安全策略即可，方式之一是在命令行中使用
"chrome.exe路徑" --disable-web-security --user-data-dir=D: emp
打開瀏覽器，此時瀏覽器會有安全性提示，依次點(diǎn)擊兩個按鈕，結(jié)果如圖：
??
AJAX請求受到跨域的限制，其請求類型是xhr，但html頁面在引用別的域的JS腳本時卻可以正常訪問，這種請求的類型是script，如圖：
JSONP的原理就是將原本的xhr請求替換為script請求，例如假設(shè)原先xhr請求返回的是數(shù)據(jù)A，JSONP請求會附帶一個callback參數(shù)說明本地使用的回調(diào)函數(shù)，假設(shè)為func1，后端收到這個JSONP請求，返回的是JS代碼func1(A)。使用JSONP需要對前后端都做修改。在此不演示~
??
我們可以讓后臺服務(wù)器代替瀏覽器去請求跨域的接口，并將數(shù)據(jù)通過本域的接口返回給瀏覽器，使瀏覽器不再發(fā)送跨域請求。例如在ServerA.py中增加一個接口如下：
@app.route("/get_8081_through_8080")
def get2():
return requests.get("http://127.0.0.1:8081/get").text
index.html增加一個button，如下：
此時對瀏覽器而言get3()就不屬于跨域的請求了，后臺代替瀏覽器向8081發(fā)送了請求。
結(jié)果如圖所示，第二個button由于跨域仍然報錯，第三個button則正常輸出：
??
ServerB也可以通過向瀏覽器返回特定響應(yīng)頭，告訴瀏覽器它是允許被跨域調(diào)用的，使用flask的make_response添加Access-Control-Allow-Origin和Access-Control-Allow-Methods兩個字段，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()方法請求的接口改為"http://127.0.0.1:8081/get2"，依次點(diǎn)擊button，第二個button已經(jīng)可以正常輸出內(nèi)容：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/41657.html
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時，老司機(jī)們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...
摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...
摘要：跨域完全講解今天在慕課網(wǎng)上學(xué)習(xí)了跨域完全講解我在收集面試題的時候其實就已經(jīng)有過跨域的問題的了，當(dāng)時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學(xué)習(xí)，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解 今天在慕課網(wǎng)上學(xué)習(xí)了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經(jīng)有過AJAX跨域...
摘要：時間年月日星期三說明本文部分內(nèi)容均來自慕課網(wǎng)。當(dāng)預(yù)檢請求通過的時候，才發(fā)送真正的請求。 時間：2018年04月18日星期三說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學(xué)源碼：https://github.com/zccodere/s...學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...
閱讀 746·2023-04-26 01:30
閱讀 3301·2021-11-24 10:32
閱讀 2179·2021-11-22 14:56
閱讀 1979·2021-11-18 10:07
閱讀 553·2019-08-29 17:14
閱讀 624·2019-08-26 12:21
閱讀 3103·2019-08-26 10:55
閱讀 2940·2019-08-23 18:09
