jQuery请求使用Flask网站出现跨域问题的解决方案

339 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复;本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告。本人所有文章仅在CSDN、掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是盗文!


众所周知跨域问题纯前端无解。

前几天用Flask写了几个网站,其中有一个情景需要在a网站中调用一个自己的b网站的API(都是Flask的)。前端使用JQ POST出现跨域报错,信息如下:

Access to XMLHttpRequest at '请求的URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果不考虑复杂的axios等前端配置的话,这个问题有两种解决方案:

  • 第一种,在cdn、nginx等处配置跨域相关的header,优点是配置方便、无需额外依赖可以快速上手,业务域名出现变更时不需要改动源代码,但是缺点就是很多时候只能配置 * 会导致不安全因素,并且不是所有人都使用这些工具
  • 第二种,也是本文要讲的,使用Python丰富的第三方扩展来实现,此处我们选用 flask-cors

首先安装依赖

pip3 install flask-cors

第一种使用,分路由配置跨域,也就是要给每个函数加上装饰器 cross_origin (注意一定是在 app.route 之后)

from flask_cors import cross_origin

...

@app.route("/", methods=["POST"])
@cross_origin()  # 重点
def index(name):
    return "Hello World!"

第二种使用,直接在全局进行配置,配置后每个接口都可以被跨域访问

from flask_cors import CORS

...

CORS(app, supports_credentials=True)

这样子再使用JQ请求就可以正常收到返回值了。至于更多的分域名放行、分方法放行等等复杂配置本文暂不做论述,请大家自行搜索学习!