python篇-Flask 跨域问题解决方案

跨域是指

例如：当前页面的地址：http://localhost:8080/ ，点击按钮请求url为：http://localhost:5000/student时，此场景为跨越访问。

浏览器的同源策略限制，跨域请求默认是被禁止的(浏览器禁止处理此请求的返回结果)。

详细说明

在使用Flask提供web接口服务时，前端页面经常会遇到跨域请求的问题。

跨域请求是指：在浏览器发起的请求，其目标接口地址（Flask提供的http服务）：http://localhost:5000/student
与当前页面的地址：http://localhost:8080/ 不在同一个域下

由于浏览器的同源策略限制，跨域请求默认是被禁止的(浏览器禁止处理此请求的返回)。

然而，在某些情况下，我们可能需要允许跨域请求，例如通过 JavaScript 发起的 AJAX 请求或在前端应用程序中调用后端 API。

补充：

1、什么是跨域问题

跨域是因为出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

        所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

        跨域问题就是当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同时出现的问题。

2、问题描述

当客户端向服务器端请求ajax服务时，如果客户端和服务器端域名不一致，就会出现跨域问题，ajax报错如下：

        No 'Access-Control-Allow-Origin' header is present on the requested 。

3、解决方式

（1）安装flask_cors：

pip install flask_cors

app初始化的时候就加载配置，如下（全局解决跨域问题）

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)

#方式1
# r'/*' 是通配符，让本服务器所有的 URL 都允许跨域请求
CORS(app, resources=r'/*')

#方式2
# CORS(app, supports_credentials=True)  #也可以解决跨域问题

if __name__ == "__main__":
    app.run()

 

4、在被请求的Response中加入header

@app.after_request
def func_res(resp):     
    res = make_response(resp)
    res.headers['Access-Control-Allow-Origin'] = '*'
    res.headers['Access-Control-Allow-Methods'] = 'GET,POST'
    res.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
    return res