时光飞逝,从接触到github并建立这个博客到现在即将毕业也一年了,在这一年的时间里,有得有失,不管在哪里,保持一颗进取学习的心,进击吧,少女!
最近遇到做前端的工作内容,想起大三的时候上平台开发这门专业课的时候,那时候就对前端挺感兴趣的,觉得能通过代码做出一个页面是件很有成就感的事情,那时候还想过以后工作了可以往这方面发展,没想到现在实习两个月就碰到它了,也是很有缘分。不过真的要自己动手钻研,发现还真的不简单。各种问题接踵而来。。。
我是在eclipse上开发运行的这个项目,其实就是一个静态页面而已。一个星期左右搞定,在eclipse上运行时用http preview at localhost(???好像是这个名字,记不清了),然导出项目到本地,直接打开html文档,发现这样一个问题
XMLHttpRequest cannot load file:///Users/yzy/github/news-list/js/mock.json. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
真的想说一下,对于我这种没有系统学过网站这方面,就是连什么file协议,http协议都不懂的人来说,最好先粗略了解一下这方面的知识,(唉,生物信息狗真的伤不起啊,生物计算机数学交叉,听上去就很玄乎其神,码代码什么的还非要跟生物挂钩,钱少活多还杂,说起来都是泪,整天对着电脑,胶原蛋白都萎缩了)
然后呢在不知道F12 debug功能之前,还在纠结是不是浏览器兼容方面的问题,最后还是请教了老哥,醍醐灌顶,豁然开朗。 是因为javaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安限制的同时,在应用上也带来了不少麻烦。
我在使用bootstrap table 将Json数据转成table 时,需要调用ajax,以上错误提示是由于AJAX方法涉及到 跨域 的问题导致!
由于没有在服务器环境里运行含有ajax方法的页面,而是直接通过浏览器打开(类似file:///的访问形式,即file协议)。本地页面ajax()请求本地页面,须通过服务器环境运行,
在网上找了一些大神的solution,将浏览器设置为支持跨域,支持访问外域资源。具体就是
chrome.exe --allow-file-access-from-files
然而并没有什么luan用,继续探索学习(继续百度),
看到一条用命令行启动chrome并关闭安全策略就能解决跨域问题的帖子
start chrome.exe --disable-web-security --user-data-dir=""
试了一下,居然成功了,Bootstrap table 成功显示,但是在ie启用允许跨网络的资料来源行不通。
最后解决方法总结如下:
1.为避免跨域问题要在服务器环境里运行含有ajax方法的页面,而不是本地页面直接访问本地文件的方式,这样保证了在用Post或者get这类请求,才能避免ajax跨域问题。
2.本地页面ajax()请求本地页面,须通过服务器黄精运行。比如在eclipse里开发时,静态页面所用服务器为HTTP preview at localhost
3.如果是在远程服务器里ajax()请求外域服务器里的页面,即使通过服务器环境运行也会报域的错误,此时需要通过jsonp的形式!
所以,还是用火狐浏览器访问的(惊了,火狐浏览器居然没有跨域的问题!!!)我要改用火狐了。