React+Django电商站非英文字符搜索编码异常如何解决

问题场景 #

• 技术栈：前端采用React.js、后端采用Python Django，开发全商品列表搜索功能，搜索支持非英文内容查询
• 异常现象：输入非英文查询词（例如俄语词текст）时，请求路径自动变为/search/%D1%82%D0%B5%D0%BA%D1%81%D1%82，预期路径为/search/текст，该编码表现导致API无法匹配到对应商品
• 客户端请求截图：
  

现有实现代码 #

搜索视图代码 #

@api_view(["GET"]) 
def searchData(request, q):
  searchedData = Product.objects.filter(Q(title__icontains=q))
  data = ProductSerializer(searchedData, many=True).data
  return Response(data)

路由配置代码 #

path('search/<str:q>/', views.searchData)

解决思路 #

首先明确：路径里的%D1%82%D0%B5%D0%BA%D1%81%D1%82不是异常编码，是HTTP标准规定的URL百分号编码，所有非ASCII字符在HTTP请求传输时都会被自动编码，/search/%D1%82%D0%B5%D0%BA%D1%81%D1%82和/search/текст本质是等价资源路径，不需要强行修改前端让路径显示原始非英文字符，按以下方案排查修复即可：

• 排查前端编码逻辑：检查前端拼接请求路径时，是否对查询词重复调用了编码方法（比如多次执行encodeURIComponent）。正常逻辑下只需要对查询词做一次URL编码即可，重复编码会导致后端一次解码后拿到的仍是编码字符串，无法匹配数据库内容。
• 后端手动解码兜底：如果确认前端编码逻辑正常，可在视图层对路径参数做一次显式URL解码，确保拿到原始查询词，修改后的视图代码参考：

from urllib.parse import unquote
from django.db.models import Q
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import Product
from .serializers import ProductSerializer

@api_view(["GET"]) 
def searchData(request, q):
  # 对路径参数做URL解码，拿到原始查询词
  raw_q = unquote(q)
  searchedData = Product.objects.filter(Q(title__icontains=raw_q))
  data = ProductSerializer(searchedData, many=True).data
  return Response(data)

• 最优实践调整：不建议把动态搜索词放在URL路径段，改为查询参数形式传递可以彻底规避这类编码匹配问题：
  1. 路由修改为：path('search/', views.searchData)
  2. 前端请求格式改为：/search/?q=查询词
  3. 视图里通过DRF自带的request.query_params.get('q')获取搜索词，框架会自动完成URL解码，不需要手动处理编码问题。

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