前端请求跨域理解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31396185/article/details/78414943

前端跨域请求发生条件:协议,主机,端口,当有一个条件满足时就会发生跨域问题。
这里写图片描述
情况1:当我们将网页以本地文件的形式打开的时候,地址栏

files:f:/……

原因:默认是以文件协议打开的,当然不允许调用本地文件,即使也是同源,因为文件协议中不存在调用别的文件这一说法。

情况2:我们通过http协议访问的方式打开网页,因为是本地文件,两者同源,所以能直接请求到本地文件。

情况3:当我们想要访问别的服务器上的文件,那么跨域请求问题就出现了,不在同一个主机上。但是打开浏览器控制台,我们会发现,依然响应成功200,但是却进入ajax的error情况,本质上就是浏览器禁止跨域加载文件,但是我们的xmlHttp请求能发出去。

2.跨域解决办法
1.jsonp
我们发现加载js文件的时候并不受浏览器跨域限制,所以我们可以让服务器返回一个带有script标签的文件,这样浏览器就不会限制了,更庆幸的是在ajax中已经为我们封装好了jsonp请求。

 $.ajax({
                             type: "get",
                             async: false,
                             url: "http://192.168.1.102:8080/mghy/shanpao/training/action/label_image/v2?imageFile=/root/Desktop/shanpaoai/sample_images/classify1.jpg&lastFrame=true",
                             dataType: "jsonp",
                             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                             jsonpCallback:"result",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                             success: function(json){
                                document.getElementById("content").innerHTML=json.msg;
                             },
                             error: function(){
                                 alert('fail');
                             }
                         });

以上强调:ajax本质上是封装了xmlhttp请求,来获取非本页的东西,而jsonp的本质是要添加script标签来逃过浏览器的限制,只不过jquery封装在了ajax中,并不能改变他的本质,就如我们也可以在后台服务端代理请求别的 服务器。

2.后台代理

跨域请求文件时,通过调用后台servelet,来代理我们请求,然后返回给前台,相当于绕过浏览器,自然不存在跨域问题。

3.h5websocket
正在学习

展开阅读全文

没有更多推荐了,返回首页