Flask最简单的跨域实例

最新推荐文章于 2024-06-26 18:35:04 发布

menghaocheng

最新推荐文章于 2024-06-26 18:35:04 发布

阅读量367

点赞数

分类专栏： Python JavaScript 文章标签：跨域问题

本文链接：https://blog.csdn.net/menghaocheng/article/details/108082344

版权

Python 同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

一、跨域的理解

跨域是指：浏览器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>

代码说明：