Vue与Django跨域异常：localhost正常，127.0.0.1请求触发CORS错误

问题原因 #

CORS机制里，http://localhost:5173和http://127.0.0.1:5173被视为两个完全不同的源，即便它们指向同一台本地机器。你的Django配置仅将localhost加入白名单，所以用127.0.0.1访问时会触发跨域拦截。

解决步骤 #

1. 更新Django的CORS白名单配置
   在settings.py的CORS_ORIGIN_WHITELIST（若使用新版corsheaders则为CORS_ALLOWED_ORIGINS）中同时添加两个地址：

   CORS_ORIGIN_WHITELIST = [
       "http://localhost:5173",
       "http://127.0.0.1:5173",
   ]
   

2. 重启服务验证
   重启Django后端服务，再用http://127.0.0.1:5173访问Vue项目发起请求，跨域错误即可消除。

额外提示 #

若需支持更多本地测试地址，直接在白名单中追加对应完整URL即可。开发环境下若想简化配置，可临时设置CORS_ORIGIN_ALLOW_ALL = True，但生产环境绝对禁止此操作。

内容的提问来源于stack exchange，提问作者刘子琦