一文带你彻底掌握Python前后端跨域问题的解决方法

pip install django-cors-headers

# settings.py

# 注册应用
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    # ... 其他应用
    'corsheaders',  # 添加corsheaders
]

# 添加中间件（注意位置要尽量靠前）
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 应该放在最前面
    'django.middleware.common.CommonMiddleware',
    # ... 其他中间件
]

# settings.py

# 允许所有来源（生产环境切勿使用！）
CORS_ALLOW_ALL_ORIGINS = True  # Django 3.x及以上版本
# 对于旧版本Django，使用 CORS_ORIGIN_ALLOW_ALL = True

# settings.py

# 只允许特定域名访问
CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:5173",  # Vue开发服务器
    "http://127.0.0.1:5173",
    "http://localhost:8080",  # 备用端口
]

# 如果需要支持正则表达式匹配（如动态子域名）
CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.example\.com$",
]

# settings.py

# 允许携带Cookie（跨域请求中携带身份凭证）
CORS_ALLOW_CREDENTIALS = True  # 默认为False 

# 允许的HTTP请求方法
CORS_ALLOW_METHODS = (
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
)

# 允许的非标准HTTP请求头
CORS_ALLOW_HEADERS = (
    "accept",
    "authorization",
    "content-type",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
    # 可以添加自定义头
    "my-custom-header",
)

# 预检请求的有效期（秒），减少预检请求次数
CORS_PREFLIGHT_MAX_AGE = 86400  # 24小时 

# 限制CORS头生效的URL
CORS_URLS_REGEX = r"^/api/.*$"  # 只对/api/路径应用CORS

# settings.py

# 允许跨域携带Cookie
CORS_ALLOW_CREDENTIALS = True

# 信任的来源（用于CSRF保护）
CSRF_TRUSTED_ORIGINS = [
    "http://localhost:5173",
    "https://yourdomain.com",
]

pip install flask-cors

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有来源访问所有路由

@app.route('/api/data')
def get_data():
    return {'message': 'Hello CORS!'}

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 配置CORS选项
cors = CORS(app, resources={
    r"/api/*": {  # 只对/api路径生效
        "origins": ["http://localhost:5173", "https://example.com"],
        "methods": ["GET", "POST", "PUT", "DELETE"],
        "allow_headers": ["Content-Type", "Authorization"],
        "supports_credentials": True,  # 允许携带Cookie
        "max_age": 3600  # 预检请求缓存时间
    },
    r"/public/*": {
        "origins": "*",  # 公开接口允许所有来源
        "methods": ["GET"]
    }
})

@app.route('/api/data')
def get_data():
    return {'message': 'Hello CORS!'}

@app.route('/public/info')
def public_info():
    return {'message': 'This is public'}

from flask import Flask, jsonify
from flask_cors import cross_origin

app = Flask(__name__)

@app.route('/api/hello')
@cross_origin(origins='http://localhost:5173')
def hello():
    return jsonify({'message': 'Hello World'})

@app.route('/api/goodbye')
# 不添加装饰器，不支持跨域
def goodbye():
    return jsonify({'message': 'Goodbye World'})

pip install fastapi uvicorn

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

app = FastAPI()

# 配置CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173", "https://example.com"],  # 允许的来源
    allow_credentials=True,  # 允许携带Cookie
    allow_methods=["*"],  # 允许所有方法
    allow_headers=["*"],  # 允许所有请求头
    max_age=3600,  # 预检请求缓存时间
)

@app.get("/api/data")
async def read_data():
    return {"message": "Hello from FastAPI"}

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

app = FastAPI()

# 从环境变量或数据库加载允许的来源
def get_allowed_origins() -> List[str]:
    # 这里可以从数据库读取配置
    return ["http://localhost:5173", "https://yourdomain.com"]

origins = get_allowed_origins()

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["Content-Type", "Authorization"],
)

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 将以/api开头的请求代理到后端服务器
      '/api': {
        target: 'http://localhost:8000',  // 后端服务器地址
        changeOrigin: true,  // 改变请求头中的Origin为目标地址
        rewrite: (path) => path.replace(/^\/api/, ''),  // 可选：重写路径
        configure: (proxy, options) => {
          // 代理配置的回调，可以添加日志等
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err);
          });
        }
      },
      // 多个代理规则
      '/uploads': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      }
    }
  }
})

// src/utils/request.js
import axios from 'axios'
const request = axios.create({
  baseURL: '',  // 由于代理配置，可以留空或写'/'
  timeout: 10000,
  withCredentials: true,  // 允许携带Cookie（如果需要）
})
// 请求拦截器
request.interceptors.request.use(
  config => {
    // 添加token等认证信息
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 统一错误处理
    console.error('请求错误:', error)
    return Promise.reject(error)
  }
)
export default request

// views/Example.vue
import request from '@/utils/request'
export default {
  methods: {
    async fetchData() {
      try {
        // 实际请求会被代理到 http://localhost:8000/hello
        const data = await request.get('/api/hello')
        console.log(data)
      } catch (error) {
        console.error('数据获取失败', error)
      }
    }
  }
}

# /etc/nginx/sites-available/example.com
server {
    listen 80;
    server_name example.com;
    # 前端静态文件
    location / {
        root /var/www/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
    # API代理
    location /api/ {
        proxy_pass http://backend-server:8000/;  # 后端服务器地址
        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;
        # 如果是跨域场景，可以在这里添加CORS头
        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" always;
        add_header Access-Control-Allow-Credentials "true" always;
        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $http_origin always;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
            add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" always;
            add_header Access-Control-Allow-Credentials "true" always;
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 204;
        }
    }
}

# docker-compose.yml
version: '3.8'
services:
  backend:
    build: ./backend
    container_name: django_backend
    expose:
      - "8000"
    environment:
      - DEBUG=False
      - CORS_ALLOWED_ORIGINS=http://localhost,https://example.com
    networks:
      - app_network
  frontend:
    build: ./frontend
    container_name: vue_frontend
    ports:
      - "80:80"
    depends_on:
      - backend
    networks:
      - app_network
  nginx:
    image: nginx:latest
    container_name: nginx_proxy
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - backend
      - frontend
    networks:
      - app_network
networks:
  app_network:
    driver: bridge

# 测试OPTIONS预检请求
curl -X OPTIONS http://localhost:8000/api/data \
  -H "Origin: http://localhost:5173" \
  -H "Access-Control-Request-Method: GET" \
  -v
# 测试实际请求
curl -X GET http://localhost:8000/api/data \
  -H "Origin: http://localhost:5173" \
  -v