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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!