React-Admin中Axios请求遇CORS错误，已用encodeURIComponent仍未解决

核心问题：400错误才是根源，CORS提示是次生问题 #

你看到的CORS缺失提示并非真正的跨域配置错误，而是服务器返回400 Bad Request状态码时，没有附带CORS响应头导致的。很多后端框架在处理错误请求时，不会自动添加CORS头，浏览器因此抛出CORS相关提示，掩盖了真正的请求错误。

为什么encodeURIComponent没解决问题？ #

从错误日志看，原输入是abc/d，但请求URL变成了http://localhost:8080/store/abc%2d——这里编码逻辑明显异常：/的正确编码应该是%2F，而%2d是-的编码。这说明你的编码结果被其他代码篡改了：

• 检查withAuth函数是否对URL做了二次解码/编码，把%2F还原成了/，导致服务器将abc/d识别为store/abc下的子资源d，而非store接口的参数abc/d。
• 排查Axios配置，比如是否有拦截器、paramsSerializer等逻辑修改了编码后的URL。

具体修复步骤 #

1. 验证编码结果：在函数中添加日志，确认编码后的字符串是否正确：

   const validateTitleUnique = async (enteredTitle) => {
     const encodedTitle = encodeURIComponent(enteredTitle);
     console.log('Encoded title:', encodedTitle); // 输入abc/d时应输出abc%2Fd
     const resp = await axios(withAuth({ url: `${API_URL}/store/${encodedTitle}` }));
     return resp.data?.length > 0 ? 'Title already exists' : undefined;
   };
   

2. 调整后端路由规则：如果后端使用路径参数接收标题，需确保路由支持编码后的斜杠（比如Express框架需要设置strict: false，或使用通配符路由匹配），避免把%2F解析为路径分隔符。
3. 确保错误响应也返回CORS头：修改后端代码，无论请求成功还是失败，都强制添加Access-Control-Allow-Origin: http://localhost:3000等CORS响应头，避免错误场景下的CORS提示干扰问题排查。
4. 改用查询参数传递（更稳定的方案）：如果路径参数的编码问题难以解决，换用查询参数传递标题，Axios会自动处理编码：

   const resp = await axios(withAuth({ 
     url: `${API_URL}/store`,
     params: { title: enteredTitle }
   }));
   

   同时后端修改为接收title查询参数即可。

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