zoukankan      html  css  js  c++  java
  • 前端请求跨域理解

    前端跨域请求发生条件:协议,主机,端口,当有一个条件满足时就会发生跨域问题。
    这里写图片描述
    情况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
    正在学习

  • 相关阅读:
    [算法专题] 深度优先搜索&回溯剪枝
    [算法专题] 二分搜索&排序数组
    rand_1tom 产生 rand_1ton
    [LeetCode] Kth Largest Element in an Array
    进程控制(Note for apue and csapp)
    Transport Layer Protocols
    Internetworking
    Dynamic Programming | Set 4 (Longest Common Subsequence)
    Dynamic Programming | Set 3 (Longest Increasing Subsequence)
    Dynamic Programming | Set 2 (Optimal Substructure Property)
  • 原文地址:https://www.cnblogs.com/caojunjie/p/8318875.html
Copyright © 2011-2022 走看看