专栏首页python3FastAPI--跨域处理(7)

FastAPI--跨域处理(7)

一、概述

为啥需要跨域处理,通常我们的API一般是给到前端去调用,但是前端可能使用域名和没提供的API域名是不一样,这就引发了浏览器同源策略问题,所以我们需要做跨域请求支持。

FastAPI支持跨域的话,可以通过添加中间的形式,和bottle也有相似之处。不仅如此他还支持仅限于支持哪些域名进行跨域请求:

import uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def main():
    return {"message": "Hello World"}

if __name__ == '__main__':
    uvicorn.run(app='main:app', host="0.0.0.0", port=8000, reload=True, debug=True)

二、演示跨域

环境说明:

前端:

操作系统:centos 7.6

ip地址:192.168.31.35

运行软件:nginx

后端:

操作系统:windows 10

ip地址:192.168.31.61

运行软件:pycharm

请求api

登录到前端服务器,安装nginx,并启动。

yum install -y nginx
nginx

访问默认页面

http://192.168.31.35/

测试页面

登录到前端服务器,默认的nginx页面目录为:/usr/share/nginx/html

新建一个测试文件

cd /usr/share/nginx/html
vi test.html

内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="api">请求接口</button>
<h4>结果</h4>
<div id="content"></div>
<script>
    $('#api').click(function () {
        $.ajax({  //发送ajax请求
            url: 'http://192.168.31.61:8000/',
            type: "get",
            data: {},
            success: function (arg) {
                //arg = JSON.parse(arg);
                console.log(arg);
                $('#content').text(arg.message)
                //return false;
            },
            error: function () {
                console.log("网络请求错误!");
            }
        });
    });

</script>
</body>
</html>

访问测试页面

http://192.168.31.35/test.html

点击请求接口按钮,提示跨域。

为什么会出现跨域呢?因为同源策略。

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以192.168.31.35下的js脚本采用ajax读取192.168.31.61里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

三、解决跨域

一般解决跨域,是在后端完成的,设置允许跨域。

修改main.py,增加前端的url地址即可。

import uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 前端页面url
origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
    "http://192.168.31.35",
]

# 后台api允许跨域
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def main():
    return {"message": "Hello World"}

if __name__ == '__main__':
    uvicorn.run(app='main:app', host="0.0.0.0", port=8000, reload=True, debug=True)

再次点击按钮,结果就会显示出来了。

本文参考链接:

http://www.zyiz.net/tech/detail-119883.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用python 实现activex网页控

    http://sourceforge.net/projects/pywin32/files/

    py3study
  • 多任务拷贝小案例

    如涉及到进程池同时需要使用到队列,使用multiprocessing.Manager().Queue(),而非multiprocessing.Queue()

    py3study
  • Python输出csv、excel表格

    在机器学习应用过程中,最重要的部分之一是数据可视化。换句话,如何说服别人或者自己? 环境:python3.5

    py3study
  • 盘点程序员最喜爱的十个开发神器,免费送

    作为资深的程序员,虽不如市面上传的那样,背心拖鞋大裤衩、脑袋不洗牙不刷,但也是基本加班到深夜,眼圈黑黑的。

    蜻蜓队长
  • wget常用参数

    AlicFeng
  • Asp.Net MVC4入门指南(9):查询详细信息和删除记录

    在本教程中,您将查看自动生成的Details和Delete方法。 查询详细信息和删除记录 打开Movie控制器并查看Details方法。 public Acti...

    葡萄城控件
  • TensorFlow实战——CNN

    鉴于以上的问题,我们介绍卷积神经网络(CNN)。先介绍CNN中的池化层和卷积层。我们根据下图来讲解:

    用户1621453
  • ORACLE 11g导入9i dump的问题及解决

    因为系统迁移,需要将一部分的9i的数据导入11g的库里, 目标库是11.2.0.3.0 64位的环境。 导入dump的时候,有一个比较大的分区表,需要用导入分...

    jeanron100
  • iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源

    视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静。 指定静态资源目录 这里我们使用第...

    iKcamp
  • 添加百度Ping加快百度收录

    更新网站,然后等待搜索引擎来收录,这种被动式的方法现在已经过时了。现在很多博客系统都加入了Ping 服务功能,所谓Ping 服务,实际上是一种更新通知服务,它可...

    空木白博客

扫码关注云+社区

领取腾讯云代金券