发送POST请求时遇报错，请求修复jQuery加载及CORS相关问题

1. 解决$ is not defined错误 #

• 原因：Google的jQuery CDN加载超时，导致jQuery未成功引入。
• 解决方法：
  • 方法一：替换为国内可访问的CDN，在HTML头部添加：

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    

  • 方法二：下载jQuery 3.6.0到本地，放在HTML同级目录后引用：

    <script src="./jquery.min.js"></script>
    

2. 修复AJAX代码中的错误 #

原代码存在参数配置错误，修改后的代码如下：

$.ajax({
  url: "https://thentic.tech/api/nfts/contract",
  type: 'POST',
  dataType: 'json',
  crossDomain: true,
  contentType: 'application/json',
  data: JSON.stringify({
    key: "yGQLF3Rd8tfWPT32vC06VF5UwrZZxsfb",
    chain_id: "97",
    name: "aaa", 
    short_name: "sdf"
  }), 
  success: function (data) {
    console.log('成功响应:', data)          
  },
  error: function(xhr, status, error) {
    console.log('请求错误:', status, error)
  }
})

修改点说明：

• 移除headers中的Access-Control-Allow-Origin：这个是服务器返回的响应头，客户端发送无效。
• 替换cors: true和xhrFields: {cors: true}为crossDomain: true：这是jQuery启用跨域请求的正确参数。
• 删除多余的secure: true：jQuery AJAX无此配置项。
• 用JSON.stringify()包裹data：当contentType设为application/json时，必须发送JSON格式字符串，否则服务器无法解析请求体。
• 添加error回调：便于查看具体错误信息，辅助排查问题。

3. 处理CORS错误 #

若修改后仍出现CORS报错，说明服务器未配置允许你的域名跨域访问，解决方式：

• 联系服务器管理员，在服务器配置中添加Access-Control-Allow-Origin头，允许你的域名（生产环境不建议用*允许所有域名）。
• 本地开发时，可使用代理工具（如Node.js的http-proxy-middleware，或Webpack/Vite等构建工具的代理配置），将请求转发到目标服务器，绕过浏览器的CORS限制。
• 注意：客户端无法单独解决CORS问题，必须服务器配合配置或使用代理。

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