AJAX跨域简单讲解【Python版】

xiaochao 发布于2019-07-30 16:23 / 1604人阅读

摘要：结果如图所示，第二个由于跨域仍然报错，第三个则正常输出在中修改也可以通过向浏览器返回特定响应头，告诉浏览器它是允许被跨域调用的，使用的添加和两个字段，更新如下将的方法请求的接口改为，依次点击，第二个已经可以正常输出内容

总结自慕课网：ajax跨域完全讲解，并且原视频中后台为JAVA，这里改成了Python。

什么是AJAX跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域，不同域之间的请求就是跨域操作。AJAX跨域就是AJAX在A域下对B域发送了请求，一般情况下会被浏览器禁止。

例如，后台开启两个Flask服务器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发送ajax请求，代码如下：




    Index


Test

因此GET 8080和GET 8081两个按钮是分别向8080/8081端口发送请求，并将结果打印在控制台。开启两个服务器，在浏览器输入127.0.0.1:8080进入index页面，打开Chrome控制台并依次点击，结果如图：

可以看到GET 8080正常输出，而由于8081端口的请求属于跨域，浏览器报错并未正常打印结果。

如何处理AJAX跨域问题

1.关闭浏览器安全策略

禁止跨域的AJAX请求，是浏览器本身的安全策略，实际上后台并没有限制，例如点击GET 8081后，可以在NETWORK中看到这个请求本身是OK的：

因此只要关闭浏览器的安全策略即可，方式之一是在命令行中使用

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

打开浏览器，此时浏览器会有安全性提示，依次点击两个按钮，结果如图：

2.使用JSONP

AJAX请求受到跨域的限制，其请求类型是xhr，但html页面在引用别的域的JS脚本时却可以正常访问，这种请求的类型是script，如图：

JSONP的原理就是将原本的xhr请求替换为script请求，例如假设原先xhr请求返回的是数据A，JSONP请求会附带一个callback参数说明本地使用的回调函数，假设为func1，后端收到这个JSONP请求，返回的是JS代码func1(A)。使用JSONP需要对前后端都做修改。在此不演示~

3.在ServerA中修改

我们可以让后台服务器代替浏览器去请求跨域的接口，并将数据通过本域的接口返回给浏览器，使浏览器不再发送跨域请求。例如在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发送了请求。
结果如图所示，第二个button由于跨域仍然报错，第三个button则正常输出：

4.在ServerB中修改

ServerB也可以通过向浏览器返回特定响应头，告诉浏览器它是允许被跨域调用的，使用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"，依次点击button，第二个button已经可以正常输出内容：

服务器托管云服务器 ajax跨域 jquery ajax 跨域 ajax跨域访问 php 跨域ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41657.html

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

alexnevsky 2019-08-22 15:00 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

i_garfileo 2019-08-15 14:27 评论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