部署Django/React应用时遇Axios与PostgreSQL协议错误求助

核心问题分析 #

你把PostgreSQL数据库的连接地址直接当成了Axios的baseURL，这是完全错误的——Axios是用于发起HTTP/HTTPS请求的工具，根本不支持postgresql:协议，这就是报错"Unsupported protocol postgresql:"的原因。

第一步：修正API地址配置 #

你需要使用Django后端在Railway上的公网访问地址（带http/https前缀）作为Axios的baseURL，而不是数据库连接串。正确配置示例：

import axios from "axios";
import { ACCESS_TOKEN } from "./constants";

// 从环境变量读取后端地址（推荐方式）
const apiUrl = import.meta.env.VITE_API_URL; 

const api = axios.create({
  baseURL: apiUrl,
});

• 在Railway的React项目环境变量中，添加VITE_API_URL，值为你的Django后端完整访问地址（比如https://your-django-service.up.railway.app）。
• 本地开发时，这个变量可以设为http://127.0.0.1:8000。

第二步：解决CORS错误 #

之前添加http/https后出现CORS问题，需要在Django后端配置跨域支持：

1. 安装跨域依赖：

   pip install django-cors-headers
   

2. 修改Django的settings.py配置：

   INSTALLED_APPS = [
       # 保留原有应用，新增下面一行
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       # 把这一行放在最前面
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       # 保留原有中间件
   ]
   
   # 开发环境可临时允许所有域名，生产环境建议指定前端域名
   CORS_ALLOW_ALL_ORIGINS = True
   # 生产环境替换为：
   # CORS_ALLOWED_ORIGINS = [
   #     "https://your-react-service.up.railway.app",
   #     "http://localhost:5173",
   # ]
   

3. 重新部署Django后端，CORS问题即可解决。

额外注意 #

PostgreSQL连接串是给Django后端用的，应该配置在Django的settings.py的DATABASES字段中，和前端Axios配置完全无关。

内容的提问来源于stack exchange，提问作者zach-d