本文共 1034 字，大约阅读时间需要 3 分钟。

一、跨域的理解

跨域是指：浏览器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 Flaskfrom flask_cors import CORSapp = 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）

    
           
   
        
    hello    
   
    

代码说明：

• 界面上有一个hello按钮
• 点击后将会向http://localhost:5000/hello发送一个get请求
• 在响应处理函数XMLHttpRequest()中把返回的数据用警告框弹出来

3. 运行验证（浏览器A）

把index.html直接拖放到chrome浏览器的标签栏运行：

真实环境下index.html应该是访问别的服务器返回的页面（注意不是上面我们运行的这个flask服务器）

点击hello按钮，将弹出

参考：

转载地址：https://blog.csdn.net/menghaocheng/article/details/108082344 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！