CrossOrigin

前言

前端采用Vue，后端采用fastAPI的CV项目在开发时遇到跨域问题，记录学习过程与解决方案。

概念

CORS

CORS or “Cross-Origin Resource Sharing” refers to the situations when a frontend running in a browser has JavaScript code that communicates with a backend, and the backend is in a different “origin” than the frontend.

Origin

An origin is the combination of protocol (http, https), domain (myapp.com, localhost, localhost.tiangolo.com), and port (80, 443, 8080).

Then, the browser will send an HTTP OPTIONS request to the backend, and if the backend sends the appropriate headers authorizing the communication from this different origin (http://localhost:8080) then the browser will let the JavaScript in the frontend send its request to the backend.

Preflight Request

These are any OPTIONS request with Origin and Access-Control-Request-Method headers.

解决方法

采用CORS中间件，后端添加allowed origins列表

from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()// 配置允许域名
origins = ["http://localhost.tiangolo.com","https://localhost.tiangolo.com","http://localhost","http://localhost:8080",
]
// 配置允许域名列表、允许方法、请求头、cookie等
app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)

fastAPI中的跨域问题解决相关推荐

vue3中axios跨域问题解决记录
问题: 在vue3中使用axios,因为后端运行在本机11000端口,vue运行在8080端口,所以理所当然遇到了跨域问题问题解决: 网上查了许多方法,试过很多,但最后只用这样做问题就解决了. ...
vue-element-ui 中请求跨域问题解决方法
找到 vue.config.js 把默认红框中的内容注释掉改为黄框中的内容. 然后更改 .env.development(开发配置文件),把 VUE_APP_BASE_API 中的内容改为 '/a ...
ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
Tomcat中的字体请求跨域问题解决
Tomcat中的字体请求跨域问题解决原作者地址: https://blog.csdn.net/u011974399/article/details/79990505 修改tomcat的web.xml ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
Spring Security系列教程解决Spring Security环境中的跨域问题
原创:千锋一一哥前言上一章节中,一一哥给各位讲解了同源策略和跨域问题,以及跨域问题的解决方案,在本篇文章中,我会带大家进行代码实现,看看在Spring Security环境中如何解决跨域问题. ...
Flak——跨域问题解决
Flask--跨域问题解决背景:最近在使用Flak-restful+Vue来做一个app,将Vue打包在了一个安卓的壳子里面.但是这期间出现了一个比较有意思的问题--跨域.做后端开发的兄弟应该在前后 ...
前后端分离框架跨域问题解决
1. 跨域问题的产生前端向后台请求,但是后台与前台不是同一个域中(域名,端口,协议任一不同就不是同一个域),那么就会产生跨域问题. 2.跨域问题解决 2.1 传统的项目那么可以直接在Filter过滤 ...
Vue 跨域问题解决
Vue 跨域问题解决 vue框架目录: ProxyTable pathRewrite:是使用proxy进行代理时,对请求路径进行重定向以匹配到正确的请求地址,其中^是正则中限定开头,则是/api为开头 ...

fastAPI中的跨域问题解决

CrossOrigin

前言

概念

解决方法

fastAPI中的跨域问题解决相关推荐

最新文章

热门文章