VS Code Live Server环境下fetch()发起POST请求URL错误、返回405问题

你遇到的405错误不是后端路由没开POST权限，是两个叠加的小问题触发的：

• 你写在fetch里的请求URL藏了肉眼看不到的零宽不可见字符。看你贴的代码里的地址，h和ttp之间夹了个零宽空格，浏览器解析到无效的协议头后，会直接把整个地址当成相对路径，拼到当前Live Server的5500端口域名下发请求——也就是请求根本没打到3000端口的后端，而是发给了5500端口的静态资源服务。静态服务本来就只处理GET请求取页面、JS、CSS文件，收到POST请求直接返回405 Method Not Allowed。
• 就算修完上面的隐藏字符问题，5500端口的前端和3000端口的后端属于跨域场景，没有CORS配置的话后端会拦截请求，同样可能触发405。

• 第一优先级：清除URL里的隐藏无效字符
  把代码里原来写URL的那行整行删掉，手动逐字敲一遍请求地址http://localhost:3000/api/teddies/order，别直接从PDF、文档、网页上复制粘贴，这类场景很容易带入零宽字符、全角空格这类人眼看不出的异常值。敲完可以临时在控制台打印下你实际传给fetch的地址，确认输出是完整的3000端口地址，没有被自动拼接5500端口的前缀：

  const orderUrl = 'http://localhost:3000/api/teddies/order';
  console.log('实际发出的请求地址：', orderUrl); // 控制台校验输出值
  let response = await fetch(orderUrl, {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataToSend)
  })
  

• 第二优先级：确认后端CORS配置放行前端端口
  跨域场景下，浏览器发正式POST请求前会先弹一个OPTIONS预检请求，如果后端没配置跨域放行，会直接把预检请求拦下来返回405。如果是基于Express搭的后端服务，确认在路由加载前挂载了cors中间件：
  先安装依赖npm install cors，在后端入口文件里加上对应配置：

  const cors = require('cors');
  app.use(cors());
  

  配置完重启后端服务再测试请求。
• 第三优先级：补全响应状态校验逻辑
  你现在的代码拿到fetch响应后直接调用.json()解析，遇到405、500这类错误状态时，返回的响应体不是正常JSON结构，很容易触发解析报错。可以在解析前先判断响应状态，避免逻辑异常：

  if (!response.ok) {
      throw new Error(`请求失败，接口返回状态码：${response.status}`)
  }
  let responseData = await response.json();
  sessionStorage.setItem('memoryResponse', responseData.orderId);
  

• 额外排查：临时关闭浏览器里的代理插件、广告拦截插件，排除本地代理工具把/api路径强制转发到5500端口的干扰，这类本地工具的规则匹配也可能导致请求地址异常拼接。

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