使用Axios与React Native对接Django API时出现网络错误

我之前也碰到过几乎一模一样的情况！浏览器直接访问生产API完全正常，但用Axios调用就报网络错误，本地测试却没问题——咱们一步步拆解排查：

最可能的原因：跨域资源共享（CORS）配置缺失 #

这是最常见的坑：浏览器直接访问mydomain.com/endpoint/时，当前页面的域名就是mydomain.com，属于同源请求，浏览器不会触发CORS校验；但Axios请求通常是从你的前端应用域名（比如localhost:3000或者另一个生产前端域名）发往API域名，属于跨域请求，浏览器会先发送OPTIONS预检请求，如果Django没有正确处理CORS，就会被浏览器拦截，表现为Axios的“网络错误”。

解决步骤：配置django-cors-headers #

1. 安装依赖：

   pip install django-cors-headers
   

2. 在settings.py中添加配置：

   # 加入INSTALLED_APPS
   INSTALLED_APPS = [
       ...
       'corsheaders',
       ...
   ]
   
   # 把CorsMiddleware放在CommonMiddleware之前
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...  # 其他中间件
   ]
   
   # 允许你的前端域名访问API（生产环境尽量精准配置，不要用通配符）
   CORS_ALLOWED_ORIGINS = [
       "https://your-frontend-production-domain.com",
       "http://localhost:3000",  # 本地开发环境
   ]
   
   # 如果你的请求需要携带Cookie或HTTP认证信息，开启这个
   CORS_ALLOW_CREDENTIALS = True
   

3. 重启生产环境的Django服务和反向代理（比如Nginx）。

其他可能的排查方向 #

如果CORS配置后还是有问题，试试这些：

• 协议不匹配：确认生产API用的是HTTPS还是HTTP，Axios的请求URL要和生产环境一致（比如不要在HTTPS的生产环境里用http://mydomain.com发起请求，会触发混合内容拦截）。
• 反向代理配置问题：如果用Nginx/Apache做反向代理，检查配置是否允许所有请求方法（比如OPTIONS），并且不要重复设置Access-Control-*头（避免和django-cors-headers冲突）。
• Axios请求配置错误：检查Axios的baseURL是否正确，有没有误写域名；如果设置了withCredentials: true，要确保Django的CORS_ALLOW_CREDENTIALS为True，且ALLOWED_HOSTS包含生产域名。
• 网络层面拦截：检查生产环境的CDN、防火墙是否拦截了Axios的请求（比如有些CDN会过滤带特定自定义头的请求），可以用curl直接请求生产API测试：

  curl -X GET https://mydomain.com/endpoint/ -H "Origin: https://your-frontend-domain.com"
  

  看是否能正常返回数据。

内容的提问来源于stack exchange，提问作者smilebomb