同源策略

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）- 模拟一个跨域场景的更多相关文章

  1. 一个跨域请求的XSS续

    之前讨论过,在解决post跨域请求时,采用iframe+本域代理页的形式,兼容性(当然是包括IE6啦)是最好的.上次提到,代理页面的作用是:执行本域下的回调函数.就是这个原因,给XSS带来了便利.详细 ...

  2. 一个跨域请求的XSS漏洞

    场景回顾 一个表单进行跨域提交的方式有很多,我们使用的采用隐藏iframe,在本域下放一个代理页面,通过服务端配合完成一次完整的请求. 首先,部署proxy.html代理页面.这个页面处理服务端返回的 ...

  3. 一个跨域请求的XSS漏洞再续

    上回提到,由于需要使用代理页面解决POST请求的跨域请求,需要在代理页面上执行传递的函数.所以我们做了白名单只有我们认可的回调函数才能在页面上执行,防止执行非法的JS方法,做脚本攻击. 我们所采用的方 ...

  4. 页面中iframe中嵌入一个跨域的页面，让这个页面按照嵌入的页面宽高大小显示的方式；iframe嵌套的页面不可以编辑的问题解决方案

    <html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...

  5. Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  6. Ajax+Spring MVC实现跨域请求（JSONP）(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  7. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  8. Ajax+Spring MVC实现跨域请求（JSONP）

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  9. CORS跨域请求的限制和解决

    我们模拟一个跨域的请求,一个是8888,一个是8887 //server.js const http = require('http'); const fs = require('fs'); http ...

随机推荐

  1. .NET Core 新特性：发布单文件可执行程序

    一.前言 .NET Core 3.0中新增加了一个特性:Publishing Single EXEs,可以通过dotnet publish 命令将整个.net core应用发布为一个可执行文件. 二. ...

  2. jsoup的Element类

    一.简介 该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个标签名,多个属性和子节点组成的html元素.从这个元素 ...

  3. 【nodejs】express框架+mysql后台数据查询

    一 环境部署 1,首先安装nodejs,并配置好环境变量(看自己习惯), 2,安装Express npm install express -g //全局安装 npm install express-g ...

  4. AOP的底层实现-CGLIB动态代理和JDK动态代理

    AOP是目前Spring框架中的核心之一,在应用中具有非常重要的作用,也是Spring其他组件的基础.它是一种面向切面编程的思想.关于AOP的基础知识,相信多数童鞋都已经了如指掌,我们就略过这部分,来 ...

  5. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  6. python实现两台不同主机之间进行通信（客户端和服务端）——Socket

    大家好,我是辰哥~ 今天教大家通过Python进行Socket网络编程 (做一个聊天程序) 可以实现在不同的主机(电脑)之间进行通话. 具体效果如何,接着往下看 可以看到客户端(上方)向服务器端(下方 ...

  7. springboot全局异常封装案例

    @ControllerAdvice三个场景:>https://www.cnblogs.com/lenve/p/10748453.html 全局异常处理 全局数据绑定 全局数据预处理 首先定义一个 ...

  8. tomcat过滤器异常

    Connected to server[2019-11-25 04:40:58,976] Artifact DUBBO_BG:Web exploded: Artifact is being deplo ...

  9. BUU-CTF[CISCN2019 华东南赛区]Web11

    BUU-CTF[CISCN2019 华东南赛区]Web11 页面最下端有提示Build with Smarty ! 确定页面使用的是Smarty模板引擎.输入{$smarty.version}就可以看 ...

  10. noip模拟29

    这次终于是早上考试了 早上考试手感不错,这次刷新了以前的最高排名- %%%cyh巨佬 \(rk1\) %%%CT巨佬 \(t2\) 90 纵观前几,似乎我 \(t3\) 是最低的-- 总计挂分10分, ...