（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)

（四）错误

1、前端axios中不要设置为127.0.0.1的host，除非你的网站有SSL证书（一年DV最低300元）不然会报错：

has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`，net::ERR_ADDRESS_INVALID

原因：因为谷歌内核浏览器不允许公网访问本地网络，除非有证书https访问。
解决方案：
（1）前端axios的baseURL设置为我们的域名，例如www.hello.com
（2）在我们的云服务器中开放一个非80接口，例如8555，允许0.0.0.0/0访问。
（3）gunicorn则运行在0.0.0.0/8555端口上。然后再nginx中修改为下面配置,使得前端访问www.hello.com/aapp/ 的转发到 => www.hello.com:8555/aapp/ （公网对公网，完美，又不用花钱了）：

server {
    listen 80;                
    server_name hello.cn *.hello.cn;  #可以用服务器的ip当名字
    location / { 
        root /root/var/www/html/dist;
		index index.html index.htm;  #指向前端入口首页
	}
	location /aapp/ {
	    proxy_pass http://0.0.0.0:8555/aapp/; 
	}
	location /bapp/ {
	    proxy_pass http://0.0.0.0:8555/aapp/; 
	}
}

(4)但上述代码还是会报错， blocked by CORS policy：Access-Control-Allow-Origin在预检请求中未通，解决办法需要在nginx中添加：

	location /aapp/ {
	    add_header Access-Control-Allow-Origin *;     #增加这个
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; #增加这个
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';    #增加这个
        if ($request_method = 'OPTIONS') {               #增加这个
          return 204;                                                    #增加这个
        }                                                                      #增加这个
	    proxy_pass http://0.0.0.0:8555/aapp/; 
	}