React中Axios Delete请求报网络错误，Curl请求正常问题排查

1. 核对参数编码与路由匹配 #

Flask的路由/environment/<environment_name>/tag/<tag>/是直接捕获路径参数，不需要对普通参数做全编码（除非参数包含/、?这类URL特殊字符）。如果用encodeURIComponent把整个参数编码，比如参数是prod/v1，编码后变成prod%2Fv1，Flask会把这个编码后的字符串当成完整的environment_name参数，导致路由匹配失败，最终触发ERR_NETWORK错误。

修正方案：

• 仅对参数中的特殊字符做转义，或者改用查询参数传递（比如/environment/tag?env=xxx&tag=yyy），这种方式的编码逻辑更稳妥。

2. 规范Axios请求的URL构建 #

手动拼接URL容易出现重复斜杠、格式错误问题，试试用new URL来构建请求地址，自动处理路径格式：

const baseUrl = new URL('http://localhost:7070/environment/');
baseUrl.pathname += `${encodeURIComponent(envName)}/tag/${encodeURIComponent(tag)}/`;
axios.delete(baseUrl.toString())
  .then(res => console.log(res))
  .catch(err => console.error(err));

如果还是用手动拼接，一定要检查最终生成的URL和curl里的完全一致（比如有没有多出来的斜杠、编码差异）。

3. 用浏览器开发者工具排查请求细节 #

按F12打开开发者工具，切换到Network标签，找到失败的请求，重点看：

• Request URL：确认和curl使用的URL是否完全匹配（排除编码差异）
• Request Method：是否确实是DELETE方法
• Response：如果有响应，看状态码和内容；如果无响应，可能是浏览器安全策略或CORS配置问题
• Headers：对比curl的请求头和Axios的请求头，特别是Origin、Content-Type，确认Flask的CORS配置允许这些头和来源。

4. 检查Flask的CORS配置是否完整 #

即使开启了CORS，也可能因为配置不全导致问题：

• 确保CORS明确允许DELETE方法：

from flask_cors import CORS
app = Flask(__name__)
# 开发环境可临时允许所有来源和方法，生产环境要限制具体域名
CORS(app, resources={r"/environment/*": {"origins": "*", "methods": ["DELETE", "GET", "POST"]}})

• 如果你在响应里加了自定义头，要在CORS配置里通过expose_headers声明允许前端访问。

5. 验证本地端口与防火墙 #

• 确认Flask服务确实运行在localhost:7070，没有被其他程序占用端口（可以用netstat -ano | findstr :7070检查）。
• 检查本地防火墙是否阻止了浏览器访问7070端口——curl用的是命令行，可能不受浏览器安全策略或防火墙限制，而浏览器请求会被拦截。

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