FastAPI(39)- 使用 CORS 解决跨域问题

简介: FastAPI(39)- 使用 CORS 解决跨域问题

同源策略


https://www.cnblogs.com/poloyy/p/15345184.html

 

CORS


https://www.cnblogs.com/poloyy/p/15345871.html

 

FastAPI 模拟跨域问题


https://www.cnblogs.com/poloyy/p/15345763.html

 

需要先了解什么是同源策略、CORS、跨域报错栗子才能更好看懂这篇文章

 

先看看之前跨域请求报错的截图


image.png

  • preflight 就是预检请求,没有通过服务端的允许,所以访问失败;
  • 点下右侧的箭头,实际发起的 login 请求会高亮
  • 第一个 login 请求就是实际发送的请求,因为预检请求失败,所以会报跨域错误

 

CORSMiddleware


image.png

  • CORSMiddleware 使用的默认参数在默认情况下是有限制性的,所以才有跨域问题
  • 因此需要显式启用特定的源、方法或 Headers,以便允许浏览器在跨域上下文中使用它们

 

allow_origins

 

allow_methods

  • 允许跨域请求的 HTTP 方法列表
  • 默认为 ['GET']
  • 可以使用  ['*'] 来允许所有标准请求方法

 

allow_headers

  • 允许跨域请求携带的 HTTP Request Headers 列表
  • 默认为 []
  • 可以使用 ['*'] 来允许所有 Headers
  • 对于 CORS 请求,始终允许 Accept、Accept-Language、Content-Language 和 Content-Type

 

allow_credentials

  • 跨域请求应该支持 cookie
  • 默认为 False
  • 重点:为了允许凭据,allow_origins 不能设置为 ['*'],必须指定 origins

 

allow_origin_regex

  • 正则表达式字符串
  • 匹配允许发出跨域请求的源

 

expose_headers

  • 允许浏览器访问的任何 Response Headers
  • 默认为 []

 

max_age

  • 设置浏览器缓存 CORS 响应的最长时间(以秒为单位),其实就是 preflight 预检请求的结果能够被缓存多久
  • 默认为 600

 

使用 CORSMiddleware 解决跨域问题


#!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
# 1、导入对应的包
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# 2、声明一个 源 列表;重点:要包含跨域的客户端 源
origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
    # 客户端的源
    "http://127.0.0.1:8081"
]
# 3、配置 CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 允许访问的源
    allow_credentials=True,  # 支持 cookie
    allow_methods=["*"],  # 允许使用的请求方法
    allow_headers=["*"]  # 允许携带的 Headers
)
# 模拟服务端 登录 接口
@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="127.0.0.1", port=8080)


访问浏览器,查看 F12 开发者工具 Network

image.png

  • preflight 就是预检请求,服务端允许它访问了,所以请求成功
  • 点下右侧的箭头,实际发起的 login 请求会高亮
  • 第一个 login 请求就是实际发送的请求,因为预检请求成功,所以它也请求成功啦

 

看看 preflight 预检请求的响应


image.png

这些就是 FastAPI 服务端设置的

 

看看实际 login 请求的响应头

image.png

看看响应体

image.png

至此!现在可以正常跨域发起请求啦!

至此!现在可以正常跨域发起请求啦!

至此!现在可以正常跨域发起请求啦!


相关文章
|
2月前
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
68 3
|
1天前
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
14天前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
78 7
|
2月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
|
3月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
3月前
|
API
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
|
3月前
|
安全 前端开发 Java
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
在Web安全上下文中,源(Origin)是指一个URL的协议、域名和端口号的组合。这三个部分共同定义了资源的来源,浏览器会根据这些信息来判断两个资源是否属于同一源。例如,https://www.example.com:443和http://www.example.com虽然域名相同,但由于协议和端口号不同,它们被视为不同的源。同源(Same-Origin)是指两个URL的协议、域名和端口号完全相同。只有当这些条件都满足时,浏览器才认为这两个资源来自同一源,从而允许它们之间的交互操作。
Web端系统开发解决跨域问题——以Java SpringBoot框架配置Cors为例
|
3月前
|
安全 开发者 UED
|
3月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
42 0