FastAPI（38）- 模拟一个跨域场景
同源策略
https://www.cnblogs.com/poloyy/p/15345184.html
CORS
https://www.cnblogs.com/poloyy/p/15345871.html
需要先了解什么是同源策略和 CORS 才能更好看懂这篇文章
目录结构
— root/
|
|—static/
| |
| |—jquery.min.js
|
|— cors_client.py
|— cors_server.py
|
cors_client.py 代码
主要模拟客户端
前提
为了使用
from fastapi.staticfiles import StaticFiles
需要先安装 aipfiles
pip install aiofiles
静态资源文件的使用教程后面再写
实际代码
#!usr/bin/env python
# -*- coding:utf-8 _*-
"""
# author: 小菠萝测试笔记
# blog: https://www.cnblogs.com/poloyy/
# time: 2021/9/28 12:58 下午
# file: 33_cors.py
"""
import uvicorn
from fastapi.responses import HTMLResponse
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles app = FastAPI() # 绑定静态资源文件夹（后面详解）
app.mount("/static", StaticFiles(directory="static"), name="static") @app.get("/")
def get_login():
# 返回一段 HTML 代码
html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:"http://127.0.0.1:8080/login",
type:"POST",
data:JSON.stringify({
"id":1,
"name":"小菠萝"
}),
contentType:"application/json",
success:function (rsp) {
console.log(rsp)
}
})
</script>
</body>
</html>
"""
return HTMLResponse(html) if __name__ == '__main__':
# 客户端是 8081 端口！
uvicorn.run(app="33_cors:app", reload=True, host="127.0.0.1", port=8081)
那段 ajax 代码就是模拟跨域请求服务端，服务端域名虽然也是 127.0.0.1，但端口是 8081，是一个跨域请求
cors_server.py 代码
主要模拟服务端
#!usr/bin/env python
# -*- coding:utf-8 _*-
"""
# author: 小菠萝测试笔记
# blog: https://www.cnblogs.com/poloyy/
# time: 2021/9/28 12:58 下午
# file: 33_cors.py
"""
import uvicorn
from fastapi import FastAPI, Body app = FastAPI() # 模拟服务端 登录 接口
@app.post("/login")
def get_login(id: str = Body(...), name: str = Body(...)):
return {"id": id, "name": name} if __name__ == '__main__':
# 服务端端口是 8080！
uvicorn.run(app="33_cors1:app", reload=True, host="0.0.0.0", port=8080)
开始模拟跨域请求场景
同时运行 cors_client.py、cors_server.py 的 uvicorn 服务器，其实就运行下两个 Python 文件就行啦
- preflight 就是预检请求，没有通过服务端的允许，所以访问失败；
- 点下右侧的箭头，实际发起的 login 请求会高亮
- 第一个 login 请求就是实际发送的请求，因为预检请求失败，所以会报跨域错误
- 查看预检请求，请求方法是 options
- Console 可以看到有跨域报错的提示，缺少Access-Control-Allow-Origin 响应头
- 所以浏览器不允许把请求发送到 127.0.0.1:8081 源上
- 访问 127.0.0.1:8081，查看 F12 开发者工具-Networ
FastAPI 如何使用 CORS 来解决跨域问题？
https://www.cnblogs.com/poloyy/p/15347578.html
FastAPI（38）- 模拟一个跨域场景的更多相关文章
- 一个跨域请求的XSS续
之前讨论过,在解决post跨域请求时,采用iframe+本域代理页的形式,兼容性(当然是包括IE6啦)是最好的.上次提到,代理页面的作用是:执行本域下的回调函数.就是这个原因,给XSS带来了便利.详细 ...
- 一个跨域请求的XSS漏洞
场景回顾 一个表单进行跨域提交的方式有很多,我们使用的采用隐藏iframe,在本域下放一个代理页面,通过服务端配合完成一次完整的请求. 首先,部署proxy.html代理页面.这个页面处理服务端返回的 ...
- 一个跨域请求的XSS漏洞再续
上回提到,由于需要使用代理页面解决POST请求的跨域请求,需要在代理页面上执行传递的函数.所以我们做了白名单只有我们认可的回调函数才能在页面上执行,防止执行非法的JS方法,做脚本攻击. 我们所采用的方 ...
- 页面中iframe中嵌入一个跨域的页面，让这个页面按照嵌入的页面宽高大小显示的方式；iframe嵌套的页面不可以编辑的问题解决方案
<html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...
- Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域
JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...
- Ajax+Spring MVC实现跨域请求（JSONP）(转)
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
- 浏览器同源策略与ajax跨域方法汇总
原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...
- Ajax+Spring MVC实现跨域请求（JSONP）
背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...
- CORS跨域请求的限制和解决
我们模拟一个跨域的请求,一个是8888,一个是8887 //server.js const http = require('http'); const fs = require('fs'); http ...
随机推荐
- 解决springboot在mac电脑下启动过慢的问题
自从用了mac以后,springboot启动的时候一直卡在build环节10多秒 但是在linux和Windows环境下,启动只要6秒,后面查看了一下其他 人也遇到这种问题,原来是需要在hosts文件 ...
- .NET 元数据概述
元数据是一种二进制信息,用以对存储在公共语言运行库可移植可执行文件 (PE) 文件或存储在内存中的程序进行描述.将您的代码编译为 PE 文件时,便会将元数据插入到该文件的一部分中,而将代码转换为 Mi ...
- 根据当前设备的宽度，动态计算出rem的换算比例，实现页面中元素的等比缩放
~function anonymous(window){ //根据当前设备的宽度,动态计算出rem的换算比例,实现页面中元素的等比缩放 let computedREM = function compu ...
- 一 MongoDB入门
一.MongoDB概念解析(对比MySQL学习): 举个例子: MongoDB可视化操作工具:推荐Robomongo 二.MongoDB默认的概念: 1.MongoDB的单个实例可以容纳多个独立的数据 ...
- js之DOM入门（慕课网学习笔记）
DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
- css - 行高
css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...
- sparksql字段类型转换
1.spark sql 计算时,一定要注意精度的问题,一般像金额之类的值,要先转换为double或者 decimal来进行计算了. 一.sql的方式:select shop_id,order_id,s ...
- Linux中增加组和用户
新服务器增加用户: 1.创建一个新的组, groupadd oracle 2.useradd 命令用于建立用户账号(-g 指定用户所属的群组) useradd -g oracle oracle 3.再 ...
- django1.9和mysql
修改setting.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#使用mysql 'NAME': 'jiank ...
- Elasticsearch集群搭建教程及生产环境配置
Elasticsearch 是一个极其强大的搜索和分析引擎,其强大的部分在于能够对其进行扩展以获得更好的性能和稳定性. 本教程将提供有关如何设置 Elasticsearch 集群的一些信息,并将添加一 ...