前端请求跨域理解

前端跨域请求发生条件：协议，主机，端口，当有一个条件满足时就会发生跨域问题。

情况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
正在学习

转载于:https://www.cnblogs.com/caojunjie/p/8318875.html