解决前端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
  • 3332

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

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

【Egret】WEB服务调用

尝试用egret调asmx里的方法,因为只用有用到过AS3.0调用,所以以为可以很容易上手搞定 结果。。。 报错如图所示,我用AS3.0的代码改H5,就发生了这个,所以应该不是服务端的问题,然后我也...
  • libins
  • libins
  • 2016年11月08日 16:58
  • 576

使用Egret开发的HTML5项目,使用本地电脑作为服务器进行移动端调试流程

流程: 1.先开启本机IIS服务器 具体开启流程如下:http://www.jb51.net/article/29787.htm 2.添加服务器MIME类型, http://blog.csdn.n...
  • arvin0
  • arvin0
  • 2016年07月28日 14:02
  • 3151

HTML5)egret框架开发环境搭建简明指引

egret官网:http://www.egret-labs.org/ egret下载中心:http://www.egret-labs.org/downloads egret文档中心:http://do...

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

转载自:http://blog.csdn.net/sujun10 作者:弃天笑 一、服务端修改Header 最主要是服务端支持服,返回的时候必须增加一个Header AddHeade...

thinkphp ajax 跨域请求 Access-Control-Allow-Origin 完美解决

ajax跨域请求出问题,一般有以下几种情况:1、直接打开本地文件夹的 .html等文件来ajax请求服务器数据,浏览器网址显示类似如下,以“file”开头:file:///Users/username...
  • abs1004
  • abs1004
  • 2017年08月08日 12:41
  • 445

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

var params = "format=json&uid=" + arg['uid'] + "&cid=" + arg['cid']+"&method="+arg['method']; ...

js跨域提交表单【详细教程,包解决】

js跨域提交表单,用jsonp格式,提供详细的代码以及包售后服务

跨域 表单提交

1.直接用jquery中$.getJSON进行跨域提交            优点:有返回值,可直接跨域;            缺点:数据量小;            提交方式:仅get (无...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决前端Html5和Egret跨域请求Http数据的例子
举报原因:
原因补充:

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