AJAX跨域、使用formdata传输文件(传输截图后的文件)、angularJS跨域

陈伟发布于2019-08-20 12:02 / 2617人阅读

A网站访问B网站这就是跨域

当你调用接口时，F12控制台抛出这状态时，你就跨域了（图示）

如何解决跨域呢？

解决的几种方法（我现在只用到了这两种）

JSONP

让后台的小伙伴设置header：如PHP的 header{"Access-Control-Allow-Origin: *"} （视你们后台小伙伴使用后台语言不同，这种写法略有不同，但基本一样的。）
“*”号表示允许任何域向我们的服务端提交请求，建议换成你们自己的域名：header{"Access-Control-Allow-Origin: 你们自己的域名"}

JSONP方法（jquery版）

             $.ajax({
                type: "get",
                async: false,
                url: urlRode,
                dataType: "jsonp",
                data : {},   //传参  你要出给后台的参数
                jsonp: "URGOO_CALLBACK", //关键部分名字随便起  但要跟后台协定保持一致的名字
                success: function(response,status,xhr){
                    console.log(response,status,xhr);
                },
                error: function(){
                    alert("fail");
                }
             });

请求成功

JSONP方法（angularJS版）

$scope.getData = function (urlRoad, headData) {

    var getUrl = urlRoad + "?URGOO_CALLBACK=JSON_CALLBACK"; 
    $http({
        url: getUrl,
        params: headData,
        method: "JSONP"
        }).success(function(data,header,config,status){
        //响应成功
        
        }).error(function(data,header,config,status){
        //处理响应失败
        });
}

重点（angularJS的callback与JQ的稍有不同）：

后台代码（我们是struts）：

        
            
                jsonpResult
                URGOO_CALLBACK
                true

请求成功：

为什么用jsonp跨域还是报错了!!??

(这个问题我之前也有碰到我是这么解决的；阿发昨天突然遇到了跨域问题，后来他用nodeJS解决了......厉害了word哥！！！)

如图

控制台抛出 Uncaught SyntaxError: Unexpected token:
其实这个时候你已经获取到数据了
那为什么会抛出错误呢？
原因是因为你的callback参数名与后端所接收的参数名不一致

如何解决： 正如图中所标记的 callback参数名，前后端保持一致就OK！

设置header方法

//PHP写法:


//Java 同PHP的差不多

//struts写法：
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Access-Control-Allow-Origin", "*");

设置了header后就可以直接用普通的$.get（） $.post（）直接访问接口了

跨域如何传输文件如file、blob

在我现阶段的认知和能力里面：用JSONP方法处理跨域无法传输文件数据（请勿打脸，给位看客老爷！），所以我用的是让后台设置header，然后运用HTML5的formdata对象实现传输文件的。

关键部分：processData: false, contentType: false 一定要加不然会报错

    function screenShot (blob) {
        var dataHead = new FormData();  //创建一个formdata对象
            dataHead.append("token", token);  //赋值
            dataHead.append("file", blob);
        
        $.ajax({              
            url: url,
            data: dataHead,
            type: "POST",
            dataType : "json",
            async:false,
            processData: false,   //一定要写
            contentType: false,   //一定要写
            enctype: "multipart/form-data",
            success: function(data) {
            },
            error: function(data, status, e) {
            }
        });
    
    }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80763.html

HTTP基本知识、跨域和调试技巧

摘要：发送到后台的数据见下图这种方式会以键值对的形式通过分隔符链接，以字符串给后台，可以传输文件，也可以传输普通数据。跨域跨域问题的根本问题就是同源策略，旨在防止网站被攻击，这里不做赘述。客户端，以为例服务端允许跨域的请求的方法。 HTTP基础其实很多面试问HTTP的3次握手，4次挥手，我觉得价值不大，可以帮助你理解HTTP的原理，死背硬记的对于你开发没有作用，而是去理解它就行。前端只关心...

starsfun 2019-08-23 16:55 评论0 收藏0
你不知道的 XMLHttpRequest

摘要：默认参数为空字符串密码，可选参数，用于授权。默认参数为空字符串备注如果不是有效的方法或地址不能被成功解析，将会抛出异常如果请求方法不区分大小写为或将会抛出异常重写由服务器返回的类型。本文详细介绍了 XMLHttpRequest 相关知识，涉及内容： AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解 XHR...

ckllj 2019-08-20 15:35 评论0 收藏0
AJAX原理与CORS跨域

摘要：同源策略指的是当前页面和目标协议域名和端口均相同。发出请求的页面所在域。响应的头部信息在后端处理，不在此处讲解。该事件会在数据接收期间不断触发，但间隔不确定。服务器确认允许之后，才发起实际的请求。 ajax作为前端开发必需的基础能力之一，你可能会使用它，但并不一定懂得其原理，以及更深入的服务器通信相关的知识。在最近两天的整理过程中，看了大量的文章，发现自己的后端能力已经限制自己在网络通...

jeyhan 2019-08-21 17:01 评论0 收藏0
移动端上传图片（ajax跨域请求）

摘要：项目开发简述项目需求上传图片并展示。做是为了给后台传值。上传截图点击更换提交数据判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。优点确实提高上传速度。缺点后台查看提交的图片，模糊不清晰。第一次写项目开发经验，望担待。除了前端以外的事就不叨叨了，下面开始弄干活（两个页面首页、列表页）。项目开发简述项目需求：上传图片并展示。项目地址：项目的链接地址开发工具：su...

frontoldman 2019-08-29 11:10 评论0 收藏0