使用XMLHttpRequest调用API时遇错误，请求协助排查

看起来你遇到了两个关联的问题：404资源找不到和CORS跨域权限问题，咱们一步步来拆解解决：

一、先解决404 Not Found错误 #

这个错误很明确——你请求的API路径在服务器上不存在。首先要核对DeepAffects文本情感识别API的官方正确端点URL：

• 你当前用的路径是/text/generic/api/latest/sync/text_recognise_emotion，大概率是版本号或者端点名称写错了。建议去官方文档确认同步情感识别接口的最新路径，比如可能正确的路径是类似/text/generic/api/v1/sync/recognise_emotion（具体以官方定义为准），替换掉URL里的latest或调整端点名称后再测试。
• 可以先用Postman、curl这类工具单独测试调整后的URL，确认能正常返回响应，再放到前端代码里调用，这样能排除前端代码之外的问题。

二、解决CORS跨域与withCredentials的冲突问题 #

第二个错误的核心是：当你设置xhr.withCredentials = true时，浏览器要求API服务器的Access-Control-Allow-Origin响应头不能是通配符*，必须是具体的请求Origin，同时还要返回Access-Control-Allow-Credentials: true。而你的情况还有个额外问题：

1. 本地文件运行的Origin限制：直接打开本地的open.html文件（file://协议）时，浏览器的Origin是null，几乎所有API服务器都不会允许null作为合法的Origin，尤其是需要携带凭证的场景。解决办法是把页面放到本地HTTP服务器上运行：
   • 比如用Python的python -m http.server（Python3）、Node.js的http-server包，或者Apache/Nginx这类服务器，这样页面的Origin会变成http://localhost:端口号，是一个合法的域名。
2. withCredentials的必要性：检查你的API调用是否真的需要携带凭证（比如cookie、HTTP认证信息等）。如果不需要，直接去掉xhr.withCredentials = true这行代码，此时服务器返回的Access-Control-Allow-Origin: *就能正常工作，不会触发CORS错误。
3. API服务器的CORS配置（如果有权限修改）：如果必须使用withCredentials，需要让API服务器的CORS配置做两个调整：
   • 将Access-Control-Allow-Origin设为你页面的具体Origin（比如http://localhost:8000）
   • 添加Access-Control-Allow-Credentials: true响应头

调整后的示例代码（假设修复URL且无需凭证） #

var data = JSON.stringify({ "content": "it is not good" });
var xhr = new XMLHttpRequest();
// 去掉不必要的withCredentials设置
// xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});
// 替换为官方确认的正确API端点URL
xhr.open("POST", "https://proxy.api.deepaffects.com/text/generic/api/v1/sync/recognise_emotion?apikey=xAur1Q9uSgipes2jnCBSTzPj8mJn4LP9");
xhr.setRequestHeader("content-type", "application/json");
xhr.send(data);

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