pip install django-cors-headers

# settings.py

# 注冊(cè)應(yīng)用
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    # ... 其他應(yīng)用
    'corsheaders',  # 添加corsheaders
]

# 添加中間件（注意位置要盡量靠前）
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 應(yīng)該放在最前面
    'django.middleware.common.CommonMiddleware',
    # ... 其他中間件
]

# settings.py

# 允許所有來源（生產(chǎn)環(huán)境切勿使用！）
CORS_ALLOW_ALL_ORIGINS = True  # Django 3.x及以上版本
# 對(duì)于舊版本Django，使用 CORS_ORIGIN_ALLOW_ALL = True

# settings.py

# 只允許特定域名訪問
CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:5173",  # Vue開發(fā)服務(wù)器
    "http://127.0.0.1:5173",
    "http://localhost:8080",  # 備用端口
]

# 如果需要支持正則表達(dá)式匹配（如動(dòng)態(tài)子域名）
CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.example\.com$",
]

# settings.py

# 允許攜帶Cookie（跨域請(qǐng)求中攜帶身份憑證）
CORS_ALLOW_CREDENTIALS = True  # 默認(rèn)為False 

# 允許的HTTP請(qǐng)求方法
CORS_ALLOW_METHODS = (
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
)

# 允許的非標(biāo)準(zhǔn)HTTP請(qǐng)求頭
CORS_ALLOW_HEADERS = (
    "accept",
    "authorization",
    "content-type",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
    # 可以添加自定義頭
    "my-custom-header",
)

# 預(yù)檢請(qǐng)求的有效期（秒），減少預(yù)檢請(qǐng)求次數(shù)
CORS_PREFLIGHT_MAX_AGE = 86400  # 24小時(shí) 

# 限制CORS頭生效的URL
CORS_URLS_REGEX = r"^/api/.*$"  # 只對(duì)/api/路徑應(yīng)用CORS

# settings.py

# 允許跨域攜帶Cookie
CORS_ALLOW_CREDENTIALS = True

# 信任的來源（用于CSRF保護(hù)）
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選項(xiàng)
cors = CORS(app, resources={
    r"/api/*": {  # 只對(duì)/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  # 預(yù)檢請(qǐng)求緩存時(shí)間
    },
    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=["*"],  # 允許所有請(qǐng)求頭
    max_age=3600,  # 預(yù)檢請(qǐng)求緩存時(shí)間
)

@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()

# 從環(huán)境變量或數(shù)據(jù)庫加載允許的來源
def get_allowed_origins() -> List[str]:
    # 這里可以從數(shù)據(jù)庫讀取配置
    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開頭的請(qǐng)求代理到后端服務(wù)器
      '/api': {
        target: 'http://localhost:8000',  // 后端服務(wù)器地址
        changeOrigin: true,  // 改變請(qǐng)求頭中的Origin為目標(biāo)地址
        rewrite: (path) => path.replace(/^\/api/, ''),  // 可選：重寫路徑
        configure: (proxy, options) => {
          // 代理配置的回調(diào)，可以添加日志等
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err);
          });
        }
      },
      // 多個(gè)代理規(guī)則
      '/uploads': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      }
    }
  }
})

// src/utils/request.js
import axios from 'axios'
const request = axios.create({
  baseURL: '',  // 由于代理配置，可以留空或?qū)?/'
  timeout: 10000,
  withCredentials: true,  // 允許攜帶Cookie（如果需要）
})
// 請(qǐng)求攔截器
request.interceptors.request.use(
  config => {
    // 添加token等認(rèn)證信息
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 響應(yīng)攔截器
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 統(tǒng)一錯(cuò)誤處理
    console.error('請(qǐng)求錯(cuò)誤:', error)
    return Promise.reject(error)
  }
)
export default request

// views/Example.vue
import request from '@/utils/request'
export default {
  methods: {
    async fetchData() {
      try {
        // 實(shí)際請(qǐng)求會(huì)被代理到 http://localhost:8000/hello
        const data = await request.get('/api/hello')
        console.log(data)
      } catch (error) {
        console.error('數(shù)據(jù)獲取失敗', error)
      }
    }
  }
}

# /etc/nginx/sites-available/example.com
server {
    listen 80;
    server_name example.com;
    # 前端靜態(tài)文件
    location / {
        root /var/www/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
    # API代理
    location /api/ {
        proxy_pass http://backend-server:8000/;  # 后端服務(wù)器地址
        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;
        # 如果是跨域場(chǎng)景，可以在這里添加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;
        # 處理預(yù)檢請(qǐng)求
        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

# 測(cè)試OPTIONS預(yù)檢請(qǐng)求
curl -X OPTIONS http://localhost:8000/api/data \
  -H "Origin: http://localhost:5173" \
  -H "Access-Control-Request-Method: GET" \
  -v
# 測(cè)試實(shí)際請(qǐng)求
curl -X GET http://localhost:8000/api/data \
  -H "Origin: http://localhost:5173" \
  -v