跨域问题

Posted 2020-11-09 Vicky_YU

碰到过的跨域问题

下面罗列一些实际项目中遇到的一些跨域问题。

1.数据格式错误导致请求失败

　　请求如下：

$.ajax({
                    url: \'http://XXX\',
                    type: \'POST\',
                    dataType: \'application/json\',
                    data: {name:plane_name,drone_model:plane_type,sn_code:plane_sn},
                    success:function(data){
                        console.log("请求成功")
                        console.log(data)
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown) {
                       console.log("请求失败")
                       console.log(XMLHttpRequest)
                       console.log(textStatus)
                       console.log(errorThrown)
                    }
                })
   });

　　

　　控制台打印如下：

　　

　　原因：

　　datatype设置的格式错误，改成json即可。其实datatype是返回的数据格式类型，这个要看后台返回给我们的到底是什么格式，是json ，那就填json。

 

2.jsonp跨域

　　一般情况出现下图的报红，那就是出现了跨域问题。常见的解决方法就是使用jQuery的jsonp。

　　

　　但是使用jsonp之后，仍然出现错误，报错如下：

Uncaught SyntaxError: Unexpected token :

　　使用 Ajax 获取 json 时，存在跨域限制；而使用 jsonp 方式，这个报错，是因为服务器端没有按照jsonp的要求将数据拼接到回调函数的参数中，而是直接返回一个json，所以会出错。

　　原因：就是这个接口不支持前端跨域请求，需要后台去获取，然后再返回给前端。