您的位置:首页 > Web前端 > AngularJS

项目第一次用AngularJS的ajax与beego调试心得

2016-10-30 22:26 323 查看
最近才开始的项目,听说Angular(以下简称ag)不错,然后前端的同学就果断的去尝试了,使用1.58的版本,据说是除了2.0最新的有维护的稳定版本,果断开发。。。。。

做了没多久问题就来了,CSS和H5都没问题,可使用到ajax与服务器通讯的时候问题就来了,服务器我们用的是beego的框架,因为现在很火很稳定的框架,astaxie大神写的,各种支持(小拍一下,O(∩_∩)O~)!提示需要做跨域处理,服务器无法接收到API的请求,get,post都不行,可前两天才接入的beego自带的API文档自动生成模块,里面的swagger却可以顺利的外网访问,难道真的是ag的问题?前端同学找了很久解决的办法,很多人都说需要在头上加一些什么东西,几乎全是一样的回复,中国特色来回转。。。。

可是我在想,如果这样不是很蛋疼了,仔细查看了beego的文档,自动API生成模块的代码,发现了之前一直不觉得很有用的地方,就是静态文件处理,swagger有段代码

        beego.BConfig.WebConfig.StaticDir["/swagger"] = "swagger"

查看说明后知道这是设置静态文件的目录,swagger下的index.html文件会被自动当主页调用,所以可以打开,后来设置了ag的目录,发现依然不行。。。。

后来仔细想了下,之前搭建Apache和nginx的经历,php的文件都会放到一个www的文件夹下,或者要设置专门的目录,这是为什么呢?想到这里突然明白了,之前放到别的文件夹下配置服务器的时候单独开了端口,确实跨域,于是果断的把web的文件放到了beego的项目目录中,然后在main开始出把web的文件夹设置为静态路径,

beego.BConfig.WebConfig.StaticDir["/angular"] = "angular"

设置好之后再打开主页localhost:8080/anguler此时就能打开主页了,跨域的问题也就不存在了。。。。

	$http.get('http://localhost:8080/v1/regist/check/', { 
params: {email: "123@qq.com",} 
}).success(function(data, status, headers, config) { 
//加载成功之后做一些事 
alert(data); 
}).error(function(data, status, headers, config) { 
//处理错误 
alert(JSON.stringify(data)); 
});

使用ajax访问,接收到返回值,到此解决这一问题,至于在头里加代码,没试过,php试过,直接加载文件头可以,GO没试过所以就想到用Apache的解决方法放到服务器目录中。。。。

这是一种方法吧,可是这个问题就是遇到有的项目可能会要求分开放,那就蛋疼了,需要大家自己去解决了,不过我觉得丢在一起似乎没什么太不妥毕竟现在图片和很多大文件都存CDN或者云端,不用保存在本地,作为GO的支持者之一(再吹下O(∩_∩)O~),“七牛云存储”,很好用,速度快,接入方便,推荐大家尝试!

项目遇到的问题随记。

____________________________________________________________________________________________________________________________________

补记:

后来开发考虑到本地调试问题,还是需要跨域,据说Nginx可以直接是这,但是如果不适用Nginx肿么办呢,后来想到PHP的头文件

header("Access-Control-Allow-Origin:*"); //允许任何访问(包括ajax跨域) 

测试了在beego里添加消息头也是可以的

    this.Ctx.ResponseWriter.Header().Set("Access-Control-Allow-Origin", "*")             //允许访问所有域

    this.Ctx.ResponseWriter.Header().Add("Access-Control-Allow-Headers", "Content-Type") //header的类型

    this.Ctx.ResponseWriter.Header().Set("content-type", "application/json")             //返回数据格式是json

this是controller的指针在每个消息返回前加上消息头即可,如果嫌麻烦可以封装起来然后直接用this调用一个函数完事,就像this.ServeJSON()
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: