新手教学系列——Flask、Fastapi、Vue、Nginx前后端分离跨域问题一揽子方案

本文链接：https://blog.csdn.net/weixin_41701856/article/details/140180365

在现代Web开发中，前后端分离已经成为一种常见的开发模式。然而，这种模式也带来了一个普遍的问题——跨域访问。不同源的前后端如何进行安全、稳定的通信？本文将详细讲解在使用Flask和FastAPI作为后端框架时，如何解决Vue前端的跨域问题，并介绍Nginx和Axios相关配置，助力你顺利实现跨域访问。

Flask中的跨域解决方案

在Flask中，可以通过安装并配置Flask-CORS库来解决跨域问题。以下是具体的操作步骤：

首先，安装Flask-CORS：

pip install flask-cors

然后，在你的Flask应用中进行如下配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 允许所有域名进行跨域请求
CORS(app=app, supports_credentials=True, resources={r"/*": {"origins": "*"}})

# 仅允许特定域名进行跨域请求
# CORS(app, resources={r"/.*": {"origins": "http://192.168.1.92:8081"}})

# 允许特定几个域名进行跨域请求
# CORS(app, resources={r"/.*": {"origins": ["http://192.168.1.92:8081", "http://www.bai.com"]}})

以上配置确保你的Flask应用能够处理来自不同源的请求，同时支持携带Cookie。

FastAPI中的跨域解决方案

在FastAPI中，可以通过添加中间件来处理跨域请求。以下是具体操作步骤：

首先，安装FastAPI和相关的CORS中间件：

pip install fastapi
pip install fastapi[all]

然后，在你的FastAPI应用中进行如下配置：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://192.168.1.92:8081"],  # 允许跨域访问的前端地址
    allow_credentials=True,  # 支持跨域请求携带cookie
    allow_methods=["*"],  # 支持所有请求类型
    allow_headers=["*"]  # 支持所有请求头
)

通过以上配置，你的FastAPI应用将能够处理来自指定前端地址的跨域请求，并支持Cookie。

Vue前端配置

在Vue项目中，通常使用Axios进行HTTP请求。为确保请求携带Cookie，需要进行如下配置：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  withCredentials: true,  // 让ajax请求携带cookie
  baseURL: 'http://你的后端地址'
});

export default instance;

Nginx中的跨域配置

在使用Nginx作为反向代理服务器时，可以通过如下配置来支持跨域请求：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://你的后端地址;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 支持跨域
        underscores_in_headers on;
        proxy_pass_request_headers on;
    }
}