如何在原生JS中实现HTTPS环境下的Ajax POST请求？

我尝试在未引入jQuery的网站中，使用原生JS发起Ajax POST请求，但无法成功运行。我编写的代码如下：

var params = { name: "Test"}; 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', 'https://www.testurl.com/api/test/save', true); 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.onreadystatechange = function () { 
  if (xhr.readyState === 4 && xhr.status === 200) { 
    response = JSON.parse(xhr.responseText); 
    console.log(reponse); 
  } 
}; 
xhr.send(JSON.stringify(params)); 

出现的错误为：

GET https://www.testurl.com/login.aspx?ReturnUrl=%2fapi%2ftest%2fsave 404 (Not Found)

请问如何让该Ajax POST请求在HTTPS环境下正常工作？

看起来你的请求被重定向到了登录页面，但登录页面本身又返回404，这背后通常有几个核心原因，咱们一步步拆解解决：

1. 优先排查身份验证问题 #

目标API显然需要用户登录才能访问，但你的请求没有携带有效的身份凭证。在HTTPS环境下，常见的处理方式有两种：

• Cookie凭证：如果目标网站是用Session-Cookie做登录验证的，原生XMLHttpRequest默认会自动携带同域Cookie，但如果是跨域场景需要额外配置。
• Token凭证：如果API采用JWT或其他Token验证机制，你需要在请求头里添加Authorization字段，示例代码如下：

  xhr.setRequestHeader('Authorization', 'Bearer 你的有效登录Token');
  

2. 检查跨域请求限制（如果页面与API不同域） #

如果你的页面域名和https://www.testurl.com不属于同一域，这属于跨域请求，必须满足CORS规则：

• 确认目标API服务器配置了正确的CORS响应头，比如Access-Control-Allow-Origin（指定你的页面域名）、Access-Control-Allow-Headers（包含你用到的Content-Type、Authorization等）。
• 若需要跨域携带Cookie，要在xhr.open之后添加：

  xhr.withCredentials = true;
  

  同时服务器端必须设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能设为*，必须指定具体域名。

3. 修正代码里的小笔误 #

你的代码里有个拼写错误：console.log(reponse);应该是console.log(response);（少了一个字母s），虽然这不是请求失败的直接原因，但会导致请求成功后控制台报错，建议先修正。

4. 排查重定向与404的根源 #

请求被重定向到登录页面但返回404，可能还有这些情况：

• 目标网站的登录页面路径配置错误，需要确认login.aspx的实际存在路径是否正确。
• 请求触发了网站的安全拦截机制，比如需要携带特定请求头模拟正常浏览器请求，可以尝试添加：

  xhr.setRequestHeader('Referer', '你的页面完整地址');
  xhr.setRequestHeader('User-Agent', navigator.userAgent);
  

测试小建议 #

可以先用Postman或curl工具测试目标API，确认在携带正确凭证的情况下能正常响应，再对照调整你的原生JS代码，这样更容易定位问题所在。

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