一、跨域的理解
跨域是指:浏览器A从服务器B获取的静态资源,包括Html、Css、Js,然后在Js中通过Ajax访问C服务器的静态资源或请求。即:浏览器A从B服务器拿的资源,资源中想访问服务器C的资源。
同源策略是指:浏览器A从服务器B获取的静态资源,包括Html、Css、Js,为了用户安全,浏览器加了限制,其中的Js通过Ajax只能访问B服务器的静态资源或请求。即:浏览器A从哪拿的资源,那资源中就只能访问哪。
同源是指:同一个请求协议(如:Http或Https)、同一个Ip、同一个端口,3个全部相同,即为同源。
最关键的问题是:浏览器A从哪拿的资源,那资源中就只能访问哪!
下面实例是展示在Flask上是如何解决这个问题的
二、实例
1. 服务端(服务器C)
创建simple_cors_demo.py:
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
@app.route('/hello')
def hello():
return "hello world"
if __name__ == '__main__':
CORS(app, supports_credentials=True)
app.run()
代码说明:
- 为/hello注册了一个服务函数hello(),返回hello world字符串
- CORS(app, supports_credentials=True)是允许跨域访问
- flask默认服务端口是5000
运行起来后可用通过浏览器访问: http://localhost:5000/hello
看到hello world说明服务器正常工作了
2. 前端页面(来自服务器B)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域Helloworld</title>
</head>
<body>
<div>
<button class="button" id="hello">hello</button>
</div>
<script>
var btnHello = document.querySelector('button#hello');
btnHello.onclick = () => {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.withCredentials = true;
xhr.open('get', 'http://localhost:5000/hello', true);
xhr.setRequestHeader('Content-Type', 'text');
xhr.send();
}
</script>
</body>
</html>
代码说明:
- 界面上有一个hello按钮
- 点击后将会向http://localhost:5000/hello发送一个get请求
- 在响应处理函数XMLHttpRequest()中把返回的数据用警告框弹出来
3. 运行验证(浏览器A)
把index.html直接拖放到chrome浏览器的标签栏运行:
真实环境下index.html应该是访问别的服务器返回的页面(注意不是上面我们运行的这个flask服务器)
点击hello按钮,将弹出
参考:https://zhuanlan.zhihu.com/p/118381660