ajax与gin的前后端交互案例

此例是源自于我制作个人博客网站的一个联系模块，预期功能是用户填写姓名，电子邮箱，电话号码，和内容，（其中内容和姓名不能为空）然后上传到后端，后端存入数据库并且返回是否成功的信息，前端根据信息提示用户。

UI界面如下

用户点击提交以后提交内容

ajax部分如下

function ContactSubmit() {
    let name= $('#name').val();
    let email = $('#email').val();
    let phoneNumber= $('#phoneNumber').val();
    let content = $('#content').val();
    let flag = confirm('确认上传？');//confirm时确认提示框，点击确认返回true,点击取消返回falseif(flag){//点击弹框的确认
    if(flag){
        $.ajax({
            type: 'POST',
            url: 'http://localhost/ContactSubmit',
            contentType:'application/json',
            dataType:'json',
            data: JSON.stringify({
                "Name": name,
                "Content": content,
                "Email": email,
                "PhoneNumber": phoneNumber,
            }),
            success: function (data) {
                if (data['msg'] === "ok") {
                    alert("提交成功")
                } else {
                    alert(data['msg'])
                }
            }
        })
    }else{//点击弹框的取消
        //alert('点击了取消')
}
}

gin的handlefunc如下

func Contact(c *gin.Context) {
	var OneContact ContactContent
	err := c.BindJSON(&OneContact)
	if err != nil {
		panic(err)
	}
	if OneContact.Content == "" || OneContact.Name == "" {
		c.JSON(http.StatusOK, gin.H{
			"msg": "fail:content can't be empty!",
		})
	} else {
		db.Create(&OneContact)
		c.JSON(http.StatusOK, gin.H{"msg": "ok"})
	}
}

本来按道理，发送ajax请求以后，gin会提取RequestBody，然后判断是否符合条件，如果符合则存入数据库并返回ok，但是爆出了如下错误，

明明是post请求，却出现了options请求，在网上查询一番之后，判断可能是因为我的传入格式和实际传入格式不符，所以我将contentType改成了

application/x-www-form-urlencoded

还是出现了以下报错

 

有接收到后端传回来的ok消息，说明后端是有读到数据，并且处理成功了的，但是返回的数据却无法使用，最后追踪

脚本无法获取响应主体（原因：CORS Missing Allow Origin）

的错误，发现竟然是因为我们发起的跨域请求，但是我们都是在本地进行实验，为什么会出现跨域请求？最后锁定在这段代码

 url: 'http://localhost/ContactSubmit',

将他改成

 url: 'http://127.0.0.1/ContactSubmit',

原因是因为浏览器将localhost和127.0.0.1解析成不同的域名，导致出现的错误

终于我们完成通讯