原生JS XMLHttpRequest如何正确设置请求头调用Pastebin API避免CORS拦截

• 完全搞反了CORS的工作逻辑：Access-Control-Allow-Origin是目标服务端要在响应头里返回的跨域权限标识，前端没有权限通过请求头设置这个字段。你代码里request.setRequestHeader("Access-Control-Allow-Origin", "*")的操作，会被浏览器判定为携带了非简单请求的自定义受限头，自动触发跨域预检流程。
• Pastebin官方API从设计之初就是面向服务端调用的，服务端根本没有配置针对浏览器跨域请求的CORS放行规则，不管前端怎么调整请求参数，只要是从浏览器页面直连https://pastebin.com/api/api_post.php发请求，预检请求都会因为拿不到跨域允许头被直接拦截。

• 取用户输入时漏读DOM的value属性：当前代码传给api_paste_code参数的是整个input DOM元素，根本不是用户输入的文本内容
• 请求体格式不符合接口要求：Pastebin API仅接收application/x-www-form-urlencoded格式的表单参数，直接传入原生JS对象会被服务端解析失败
• 响应解析逻辑错误：Pastebin创建粘贴成功后返回的是纯文本格式的粘贴链接，不是JSON结构，就算跨域校验通过，原有代码里的JSON.parse也会抛出格式错误

• 生产环境方案：写一个极轻量的后端中转接口。因为服务端间的请求不存在CORS限制，你可以让后端接收前端发来的参数，由后端向Pastebin API转发请求，拿到返回结果后再透传回前端，这也是官方推荐的前端接入方式
• 本地调试临时方案：启动本地Chrome时加入--disable-web-security --user-data-dir=自定义临时目录参数关闭跨域安全校验，仅适合本地开发测试，绝对不能用于线上生产环境

修正后的前端参考代码（需配合中转代理使用，直连Pastebin地址依然会被CORS拦截）

function hello() {
  const request = new XMLHttpRequest();
  // 正确读取用户输入的文本值
  const inputValue = document.getElementById("input").value.trim();
  // 按接口要求组装urlencoded格式的请求体
  const requestBody = new URLSearchParams({
    api_dev_key: "你的私有开发密钥",
    api_option: "paste",
    api_paste_code: inputValue
  }).toString();

  // 替换为你自己部署的中转接口地址，不要直连Pastebin官方域名
  request.open("POST", "/你的中转接口路径");
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.send(requestBody);

  request.onload = () => {
    if (request.status === 200) {
      // Pastebin返回的是纯文本粘贴链接，无需JSON解析
      console.log("创建成功，粘贴地址：", request.responseText);
    } else {
      console.log(`请求异常：${request.status} ${request.statusText}`);
    }
  };
}

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