（vue3+flask前后端分离）nginx代理vue3 gunicorn启动flask flask_cors跨域连接

主要说说思路

一、路线

1、前端：用vue3脚手架打包后的dist。（不详细说，不外乎安装、写逻辑、写请求发送axios、打包npm run build）
2、后端：用flask。（不详细说，不外乎安装、写一个app.py）
3、基本的需要用到node.js、vue-cli 、axios、python、flask、nginx、gunicorn
3、流程：
客户端（即用户访问我们的网站）=> 用户先输入网站网址例如localhost：8133 => 通过nginx反向代理 => nginx把“网站网址”和前端的dist绑定 => 用户可以进入我们的前段网站首页 => 网站首页有一个按钮，用户点击 => 该按钮通过axios可发送请求到后端flask => flask通过gunicorn启动 => flask收到请求后发送响应至前端 =>结束(一个简单的前后端分离)。

二、需要注意的地方

（一）nginx把“网站网址”和前端的dist绑定

1、ubuntu系统在/etc/nginx/cong.d下添加自定义配置文件default.conf
2、default.conf内容：

server {
    listen 8133;               #客户端访问端口
    server_name localhost;  #可以用服务器的ip当名字
    location / { 
        root /var/www/html/dist;    #dist所在位置
        index index.html index.htm;  #指向前端入口首页
    }   
}

3、nginx简单操作
安装：sudo apt-get install nginx
查看nginx是否在运行：ps -ef | grep nginx
添加自定义配置文件default.conf
修改default.conf后需要重启nginx：systemctl start nginx =>不行就，nginx -s reload

（二）flask收到请求后发送响应至前端

1、后端如果想把cookies发送到前端，需要增加

CORS(app, resources=r'/*', supports_credentials=True)

（三）前端的操作

1、第一步：在vue.config.js中注册路由，如下：

devServer: {
    proxy: {
        '/api': {
            //对应的接口前缀，填入你对应的前缀，后面搭建Flask时会说明
            target: 'http://127.0.0.1:5000',//这里填入你要请求的接口的前缀
            ws:true,//代理websocked
            changeOrigin:true,//虚拟的站点需要更管origin
            secure: false,                   //是否https接口
            pathRewrite:{
                '^/api':''//重写路径
            }
        }
    }
  }

2、第二步，编写组件：

<button @click="test()">测试按钮</button>

3、编写组件js代码：

<script setup>

import axios from 'axios';

function test(){
  axios.get('http://127.0.0.1:5000/api/axios').
  then(res=>{
    console.log(res)
  })
  .catch(error =>{
    console.log(error)
  })
}
</script>

后端flask代码

app.py

from flask import Flask
from flask_cors import CORS 
 
app=Flask(__name__)
CORS(app)
 
@app.route('/')
def index():
    return 'Hello Flask!!!'

@app.route('/api/axios' , methods=['GET'])
def msg():
    return '需要传递给前端的数据'

if __name__=="__main__":
    print(app.url_map)
    app.run(debug=True)