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

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

当你调用接口时,F12控制台抛出这状态时,你就跨域了(图示)

图片描述


如何解决跨域呢?

解决的几种方法(我现在只用到了这两种)
  1. JSONP

  2. 让后台的小伙伴设置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):

        <action name="coselorLogin"
            class="com.luotuo.urgoo.action.login.LoginAction" method="coselorLogin">
            <result name="success" type="json">
                <param name="root">jsonpResult</param>
                <param name="callbackParameter">URGOO_CALLBACK</param>
                <param name="noCache">true</param>
            </result>
        </action>

请求成功:
图片描述


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

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

如图图片描述

控制台抛出 Uncaught SyntaxError: Unexpected token:
其实这个时候你已经获取到数据了图片描述
那为什么会抛出错误呢?
原因是因为你的callback参数名与后端所接收的参数名不一致
图片描述
如何解决: 正如图中所标记的 callback参数名,前后端保持一致就OK!


设置header方法

//PHP写法:
<?php
    header{"Access-Control-Allow-Origin: *"}
    
?>

//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) {
            }
        });
    
    }

阅读 5k

推荐阅读
翻滚吧!前端
用户专栏

前端技术

2 人关注
5 篇文章
专栏主页