|
总结自慕课网：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请求，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h3>Test</h3>
<button onclick="get1()">GET 8080</button>
<button onclick="get2()">GET 8081</button>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function get1(){
$.get("http://127.0.0.1:8080/get").then(
function(res){
console.log(res);
})
}
function get2(){
$.get("http://127.0.0.1:8081/get").then(
function(res){
console.log(res);
})
}
</script>
</html>
因此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:temp
打开浏览器，此时浏览器会有安全性提示，依次点击两个按钮，结果如图：
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，如下：
<button onclick="get3()">GET 8081 THROUGH 8080</button>
<script type="text/javascript">
function get1(){
...
}
function get2(){
...
}
function get3(){
$.get("http://127.0.0.1:8080/get_8081_through_8080").then(
function(res){
console.log(res);
})
}
</script>
此时对浏览器而言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已经可以正常输出内容：
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
