如何在本地用html文件提交一个携带json格式数据的post网络请求？

js 跨域问题
如何在本地用html文件提交一个携带json格式数据的post网络请求？

<script>
function sendData() {
  const data = { username: "John", age: 30 };   // 定义要提交的数据
  fetch("http://example.com/user/post", {    // 请求的 URL
    method: "POST",    // 请求方法
    headers: {
      "Content-Type": "application/json"     // 请求头
    },
    body: JSON.stringify(data)   // 将数据转为 JSON 格式
  })
  .then(res => res.json())    // 获取响应并解析为 JSON
  .then(data => {
    console.log(data);    // 处理提交成功后的响应
  })
  .catch(err => console.log(err))   // 处理错误
}
</script>
<button onclick="sendData()">Submit</button>  // 点击按钮调用 sendData() 方法

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/373778
• 这篇博客也不错, 你可以看下js 发送post json格式请求
• 除此之外, 这篇博客: 使用gin接受post的json数据中的 第一种 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• func Login(c *gin.Context) {
  	json := make(map[string]interface{}) //注意该结构接受的内容
  	c.BindJSON(&json)
  	log.Printf("%v",&json)
  	c.JSON(http.StatusOK, gin.H{
  		"name": json["name"],
  		"password": json["password"],
  	})
  }
  

• 以下回答由chatgpt基于相关博客总结生成:

  对于跨域问题的解决，我认为有以下几个要求：

  1. 安全性：跨域解决方案需要保证数据传输的安全性，防止数据被窃取或者篡改。

  2. 通用性：跨域解决方案需要支持多种应用场景，比如跨域Ajax请求、跨域Post请求等。

  3. 高效性：跨域解决方案需要保证数据传输的速度和效率，避免影响用户体验。

  常用的跨域解决方案有以下几种：

  1. JSONP：通过动态创建script标签实现跨域请求。但是由于只支持GET方式请求，且只能接收JSON格式的数据，安全性较低。

  function loadScript(src, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => {
      callback();
    }
    document.head.appendChild(script);
  }
  
  loadScript('http://www.example.com/api/login?username=admin&password=123456', function(data) {
    console.log(data);
  });
  

  1. CORS：需要服务器端设置Access-Control-Allow-Origin响应头，支持各种HTTP方法请求，且安全性较高。

  // server.js
  app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });
  
  // client.js
  fetch('http://www.example.com/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: 'admin',
      password: '123456'
    })
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
  });
  

  1. 反向代理：通过Nginx等web服务器反向代理，解决跨域问题。将前端请求发送到Nginx服务器，再由服务器代理转发请求到后端接口，可以跨域请求任意后端接口，但需要额外搭建一台服务器。

  # nginx.conf
  server {
      listen 80;
      server_name www.example.com;
  
      location /api/ {
          proxy_pass http://127.0.0.1:8080/;
          add_header 'Access-Control-Allow-Origin' '*';
      }
  }
  

  fetch('http://www.example.com/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: 'admin',
      password: '123456'
    })
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
  });
  

  以上是我对跨域问题的解决方案和要求的回答，希望能对您有所帮助。