React从Django后端获取数据时遇SyntaxError错误求助

错误根源 #

你设置了mode: 'no-cors'，这个模式下浏览器会完全禁止读取响应内容——哪怕后端返回了合法的JSON数据，前端也无法获取到有效解析内容，调用resp.json()时自然会因无数据可解析抛出"Unexpected end of input"错误。

具体解决步骤 #

1. 移除mode: 'no-cors'配置
   直接删除fetch选项中的这一行，浏览器默认的CORS模式可正常处理跨域请求，前提是后端已配置CORS支持。

2. 在Django后端配置CORS

   • 先安装依赖包：

     pip install django-cors-headers
     

   • 修改settings.py文件：
     • 在INSTALLED_APPS中添加：

       INSTALLED_APPS = [
           # 其他已有的app
           'corsheaders',
       ]
       

     • 在MIDDLEWARE中添加（需放在django.middleware.common.CommonMiddleware之前）：

       MIDDLEWARE = [
           'corsheaders.middleware.CorsMiddleware',
           'django.middleware.common.CommonMiddleware',
           # 其他中间件
       ]
       

     • 添加允许的跨域源（根据你的React运行端口调整）：

       CORS_ALLOWED_ORIGINS = [
           "http://localhost:3000",
           "http://127.0.0.1:3000",
       ]
       # 开发环境临时允许所有源的话，可开启下面一行（生产环境禁用）
       # CORS_ALLOW_ALL_ORIGINS = True
       

3. 优化fetch请求的错误处理（可选）
   增加响应状态检查，提前捕获HTTP错误：

   useEffect(() => {
     fetch('http://127.0.0.1:8000/api/users/', {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': 'token 2e8bfe0b7ff1716c0c255ac62adad9d9832e7173'
       }
     })
     .then(resp => {
       if (!resp.ok) {
         throw new Error(`请求失败，状态码：${resp.status}`);
       }
       return resp.json();
     })
     .then(resp => setArticles(resp))
     .catch(error => console.log(error))
   }, [])
   

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