前端Vue 后端FastApi 跨域 CORS

前端跨域方法和后端跨域方法二选一,推荐后端跨域

什么是跨域问题?

前端是localhost:3000,后端是localhost:8000 ,就是跨域了

Vue跨域方法

在vue.config.ts中,server中,增加proxy部分的代码,意思是 将/api 重写成 后端的地址

  server: {

    host:'0.0.0.0',
    open: true,
    proxy: {
      '/api': {
        target: "http://127.0.0.1:8000",
        changeOrigin: true,
        rewrite(path) {
          return path.replace(/^\/api/, '')
        },
      },
      

      },
  },

然后vue中用axios访问后端的网址就写成

import axios from 'axios'
export const addNutInfo = (req:any) => {
    return axios.post('/api/nut/${line}',req)}

相当于 http://127.0.0.1:8000/nut/${line}

后端FastAPI跨域方法

参考https://fastapi.tiangolo.com/zh/tutorial/cors/

origins列表中写的是 前端端口号 比如3000

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"}

推荐后端跨域的办法,vue前端直接写后端端口就行

export const getNutSum=(line:any) =>{
    return axios.get(`http://127.0.0.1:8000/getsum/${line}`)
}
相关推荐
xiao-xiang16 分钟前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins
C语言魔术师33 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
匹马夕阳2 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?2 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
沈梦研9 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角9 小时前
CSS 颜色
前端·css
轻口味10 小时前
Vue.js 组件之间的通信模式
vue.js