解决前端Html5和Egret跨域请求Http数据的例子

原创 2017年06月08日 20:22:41

最近在做平台的接入,需要做一些像其他web服务器请求相关数据的功能。那么就遇到了一个跨域请求网络数据的问题了。这里记录一下相关的解决方案。

一、服务端修改Header

  1. 最主要是服务端支持服,返回的时候必须增加一个Header
AddHeader("Access-Control-Allow-Origin","*");

实际部署的时候,* 应该修改为指定的域名
2. 客户端使用XMLHttpRequest,但是也要增加一个Header

setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

后面看具体的使用例子了。

二、使用XMLHttpRequest

var XMLHttp = new XMLHttpRequest();
XMLHttp.withCredentials = false;  //不用认证    
XMLHttp.onreadystatechange = function()
{
    if(XMLHttp.readyState === 4)  //4表示准备完成
    {
        if(XMLHttp.status === 200)  //200表示回调成功
        {
            console.log(XMLHttp.responseText);
            //返回的数据,这里返回的是json格式数据
            var result = JSON.parse(XMLHttp.responseText); 
            if(result.errorCode == 0)
            {   
                //处理实际的返回数据
            }
            else
            {
                alert(result.errorMessage);
            }
        }   
        else 
        {   
            alert("Request was failure: " + XMLHttp.status);
        }
    }
};
//测试url
var url = 'http://192.168.0.166:8080/game/cmgeLogin';
XMLHttp.open('POST', url, true); //post传递
//使用 XMLHttp 来模仿表单提交,加一个请求头部。
XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
XMLHttp.send();  //发送数据

如果是老版本的ID,还得做兼容的检测

getXmlHttpRequest = function() 
{
    if (window.XMLHttpRequest) 
    {           
        //主流浏览器提供了XMLHttpRequest对象
        return new XMLHttpRequest();   
    } 
    else if (window.ActiveXObject) 
    {   
        //低版本的IE浏览器没有提供XMLHttpRequest对象
        //所以必须使用IE浏览器的特定实现ActiveXObject
        return new ActiveXObject("Microsoft.XMLHttpRequest");
    }
};  

三、使用白鹭的API

使用Egret自己封装的RES就非常简洁了,普通页面返回文本

RES.getResByUrl(url,function(data:string):void
{
    console.log(data);
},this,RES.ResourceItem.TYPE_TEXT);

处理返回json格式的结果

RES.getResByUrl(url,function(data:Object):void
{
    console.log(data);
},this,RES.ResourceItem.TYPE_JSON);

使用egret.URLLoader

var url:string = this.config.loginUrl;
//请求登录服务器
this.loginLoader = new egret.URLLoader();
this.loginLoader.dataFormat = egret.URLLoaderDataFormat.TEXT;
var request:egret.URLRequest = new egret.URLRequest();
request.requestHeaders = [new egret.URLRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8")];
request.url = this.config.loginUrl + "?gameUID=sword&channelUID=cmge&cmgePlayerId=lgl123321&loginTime=1496741695&sign=23456789";
this.loginLoader.addEventListener(egret.Event.COMPLETE,function(evt:egret.Event):void
{
    var data:string = this.loginLoader.data;
    console.log(data);
},this);
this.loginLoader.load(request);

也可以使用白鹭的HttpRequest

var httpRequest:egret.HttpRequest = new egret.HttpRequest();
httpRequest.responseType = egret.HttpResponseType.TEXT;
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
httpRequest.addEventListener(egret.Event.COMPLETE,function(evt:egret.Event):void
{
     var data:string = httpRequest.response;
     console.log(data);
},this);
httpRequest.open("http://192.168.0.166:8080/game/cmgeLogin",egret.HttpMethod.POST);
httpRequest.send();

这里要注意的是,必须增加一个RequestHeader,也就是

"Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"

否则会提示下面的错误的:

XMLHttpRequest cannot load http://192.168.0.166:8080/game/cmgeLogin. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 400.
Uncaught Error: #1011: 流错误。URL: http://192.168.0.166:8080/game/cmgeLogin
  _error    
  (anonymous function)  

基本上,Egret所封装的api足够使用得我们去从其他的web服务器获取所需要的数据了。

版权声明:本文为博主原创文章,转载必须声明出处和作者。地址:http://blog.csdn.net/sujun10 作者:弃天笑

解决egret跨域问题

服务器设置header:“Access-Control-Allow-Origin:* ”
  • wkyb608
  • wkyb608
  • 2015年07月05日 13:38
  • 3633

前端解决跨域问题的8种方案(最新最全)

原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 ...
  • Joyhen
  • Joyhen
  • 2014年03月20日 16:52
  • 195770

HTML5游戏制作之路_03_egret的资源加载机制

/* 前一篇的链接: 使用的egret版本为2.5 */ h5支持矢量图(目测),自带的那个例子可以自由缩放,可以自适应(这让我很爽)。在egret里面叫bitmap(位图)实际上这个名称并不...
  • qq_23156791
  • qq_23156791
  • 2015年11月19日 01:39
  • 3783

js跨域请求小结

同源策略及跨域网络访问 同源的定义:如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机(即域名),那么这两个页面就属于同一个源(origin)。 反之就是跨域,以下场景均属于跨域...
  • wfbob
  • wfbob
  • 2016年04月09日 21:04
  • 1565

html静态页面,实现跨域访问

  • 2016年05月16日 17:26
  • 17.13MB
  • 下载

前端跨域html5方法

前端跨域html5方法
  • myfwjy
  • myfwjy
  • 2017年02月12日 14:43
  • 1074

【Egret】Wing3发布移动APP功能,打包APK流程以及会遇到的问题

流程: 可能会遇到的问题: 1.图片格式不规范 2.问题:如果提示下图错误,原因是没有正确配置JAVA的环境变量    解决方法:按照这个教程的流程走一遍就OK了,http://j...
  • arvin0
  • arvin0
  • 2016年06月20日 10:19
  • 13345

深入理解前端跨域方法和原理

前言 受浏览器同源策略的限制,本域的js不能操作其他域的页面对象(比如DOM)。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操...
  • kongjiea
  • kongjiea
  • 2015年03月11日 16:44
  • 30938

Egret引擎 HttpRequest 报错No 'Access-Control-Allow-Origin'

var params = "format=json&uid=" + arg['uid'] + "&cid=" + arg['cid']+"&method="+arg['method']; ...
  • lake1314
  • lake1314
  • 2016年08月13日 22:38
  • 1342

JavaScript 跨域访问的问题和解决过程

分享一下最近用jQuery跨域请求的经历,  希望能给大家一些关于这个方案的概念和资料。 该部分包括客户端和服务器端,(如果服务器不在自己手上,那么还是考虑通过自己的服务器转发请求吧)    ...
  • sgear
  • sgear
  • 2016年05月23日 16:58
  • 1146
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决前端Html5和Egret跨域请求Http数据的例子
举报原因:
原因补充:

(最多只允许输入30个字)