本地Vite应用POST XML请求遇CORS/NS_ERROR_DOM_BAD_URI问题求助

一、先修正代码中的明显错误 #

你的XHR代码里有几个关键错误，直接导致了请求异常：

1. 移除客户端不该设置的CORS响应头
   Access-Control-Allow-Origin、access-control-allow-methods是服务器返回给浏览器的响应头，前端发送这些请求头会触发浏览器的安全校验，直接删掉这两行：

// 删掉以下两行
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.setRequestHeader('access-control-allow-methods', 'OPTIONS,GET,POST');

2. 修正Content-Length设置
   你写的'xmlBody.length'是字符串，不是实际的Body长度，改成：

xhr.setRequestHeader('Content-Length', xmlBody.length.toString());
// 也可以省略这个头，浏览器会自动计算并设置

3. 修正Content-Type
   你发送的是XML内容，但设置的是application/x-www-form-urlencoded，服务器无法正确解析，改成XML对应的Content-Type：

xhr.setRequestHeader('Content-Type', 'application/xml'); // 或'text/xml'

4. 不要手动设置Origin头
   浏览器会自动根据当前页面地址发送正确的Origin（比如http://localhost:5173，注意不要加末尾的斜杠），手动设置会触发NS_ERROR_DOM_BAD_URI错误，删掉这行：

// 删掉
xhr.setRequestHeader('Origin', 'http://localhost:5173/');

二、修正后的示例代码 #

var xhr = new XMLHttpRequest(); 
// 如果不需要携带Cookie/HTTP认证信息，直接删掉这行
// xhr.withCredentials = true;
xhr.onload = success; 
xhr.onerror = error; 

xhr.open('POST', API_URL); 

xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.setRequestHeader('Accept', '*/*');
xhr.setRequestHeader('Accept-Language', 'en-GB');
xhr.setRequestHeader('Accept-Encoding', 'gzip, deflate');
xhr.setRequestHeader('Connection', 'Keep-alive');
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Cache-Control', 'no-cache');

xhr.send(xmlBody);

三、针对CORS OPTIONS 403的额外排查 #

1. withCredentials的影响
   如果保留了xhr.withCredentials = true，必须确保外部服务器的响应头包含：

• Access-Control-Allow-Origin: http://localhost:5173（不能是*，必须指定具体Origin）
• Access-Control-Allow-Credentials: true
  否则浏览器会拒绝接收响应。

2. Vite开发环境代理绕过CORS
   开发环境下，直接用Vite的代理配置绕过同源策略，在vite.config.js中添加：

export default {
  server: {
    proxy: {
      '/api': {
        target: '你的外部服务器地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

之后前端请求地址改成/api/xxx，Vite会自动转发到外部服务器，避免CORS问题。

3. 服务器预检请求校验逻辑
   Postman和编辑重发请求正常，是因为Postman不会触发CORS预检，编辑重发时浏览器可能跳过了部分预检检查。需要确认外部服务器的OPTIONS请求处理逻辑：

• 是否允许POST方法
• 是否允许你发送的所有请求头（比如Accept-Language、Content-Type等）
• 是否正确返回Access-Control-Allow-Origin等CORS响应头

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