如何用JavaScript解决CORS错误？POST请求跨域问题求助

CORS错误解决方法 #

你的报错核心是：请求使用了credentials: 'include'，但服务器返回的Access-Control-Allow-Credentials响应头为空，不符合浏览器的CORS校验规则。

关键误区修正 #

你在请求头里添加Access-Control-Allow-Credentials是无效的——这个是服务器响应头，不是请求头，浏览器不会将其发送给服务器，所以加了也无法解决问题。

可行解决方案 #

• 方案一：移除凭证需求
  如果你不需要携带cookie等凭证，直接把credentials: 'include'改为credentials: 'omit'，这样浏览器不会校验Access-Control-Allow-Credentials头，能绕过这个错误。

• 方案二：要求服务器配置
  如果必须携带凭证，需要联系API服务提供者在服务器端添加以下响应头：

  • Access-Control-Allow-Credentials: true
  • Access-Control-Allow-Origin: http://127.0.0.1:8080（注意不能用*通配符，带凭证的请求必须指定明确的源）

• 方案三：本地代理转发
  开发阶段可以用代理工具，将请求转发到目标API，避免跨域问题。比如：

  • 用Node.js写简单代理脚本，或者用http-proxy-middleware库
  • 配置live-server的代理规则，将/api/order请求转发到https://labelsupply.io/api/order

代码优化建议 #

你的代码存在变量未声明、数据冗余、拼写错误等问题，以下是优化后的代码及说明：

优化后代码 #

document.querySelector('.btn-order').addEventListener('click', async function() {
  // 统一获取表单数据，避免重复DOM查询
  const formValues = {
    type: document.querySelector('#type').value,
    weight: document.querySelector('#weight').value,
    fromCountry: "US",
    fromName: document.querySelector('#fromName').value,
    fromCompany: document.querySelector('#fromCompany').value,
    fromStreet: document.querySelector('#fromStreet').value,
    fromStreet2: document.querySelector('#fromStreet2').value,
    fromCity: document.querySelector('#fromCity').value,
    fromState: document.querySelector('#fromState').value,
    fromZip: document.querySelector('#fromZip').value,
    toCountry: 'US',
    toName: document.querySelector('#ToName').value,
    toCompany: document.querySelector('#ToCompany').value,
    toStreet: document.querySelector('#ToStreet').value,
    toStreet2: document.querySelector('#ToStreet2').value,
    toCity: document.querySelector('#ToCity').value,
    toState: document.querySelector('#ToState').value,
    toZip: document.querySelector('#ToZip').value
  };

  console.log(formValues);

  // 构造请求数据，复用表单值
  const requestData = {
    Type: formValues.type,
    Weight: formValues.weight,
    FromCountry: formValues.fromCountry,
    FromName: formValues.fromName,
    FromCompany: formValues.fromCompany,
    FromStreet: formValues.fromStreet,
    FromStreet2: formValues.fromStreet2,
    FromCity: formValues.fromCity,
    FromState: formValues.fromState,
    FromZip: formValues.fromZip,
    ToCountry: formValues.toCountry,
    ToName: formValues.toName,
    ToCompany: formValues.toCompany,
    ToStreet: formValues.toStreet,
    ToStreet2: formValues.toStreet2,
    ToCity: formValues.toCity,
    ToState: formValues.toState,
    ToZip: formValues.toZip
  };

  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded', // 修正拼写错误
    'X-Api-Auth': '000000000-0000000-000000-000000000'
  };

  const queryString = new URLSearchParams(requestData).toString();

  try {
    const response = await fetch('https://labelsupply.io/api/order', {
      method: 'POST',
      headers: headers,
      credentials: 'omit', // 根据需求调整为include/omit
      body: queryString
    });

    // 检查HTTP响应状态
    if (!response.ok) {
      throw new Error(`请求失败：状态码 ${response.status}`);
    }

    const data = await response.json();
    console.log('请求成功:', data);
  } catch (error) {
    console.error('请求出错:', error);
  }
});

优化点说明 #

• 避免全局变量污染：所有变量用const声明，防止意外修改或全局作用域污染
• 简化DOM查询：用对象统一存储表单值，减少重复的document.querySelector调用
• 修正请求头错误：把application/www-x-form-urlencoded改为正确的application/x-www-form-urlencoded
• 移除无效请求头：删除了没用的Access-Control-Allow-Credentials请求头
• 优化异步语法：用async/await替代链式then，代码逻辑更直观
• 完善错误处理：增加HTTP状态码检查，能捕获非2xx的响应错误
• 复用表单数据：请求数据使用实际获取的表单值，不再写死固定内容

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