解决本地调试导致的Ajax跨域问题

写了Ajax在chrome测试时，会报错：XMLHttpRequest cannot load file:///E:/web/jqueryTest/ajax.html. Cross origin requests are only supported for protocol schemes: http,data,chrome,chrome-extension,https,chrome-extension-resource.

这是由于涉及到跨域问题！直接用浏览器打开是通过file协议，没有在服务器环境里运行含有ajax方法的页面。

在这篇文章中有了很好的解释 http://www.exp99.com/jswz/f2e/1415609654_115.html

本地页面ajax()请求本地页面，须通过服务器环境运行，类似这样：http://127.0.0.1:8888/2014/DEMO/html_ajax/index.html

这个问题有两种解决方案，第一种是给chrome添加启动参数，第二种是把本地配成服务器环境。

1.添加启动参数

在网上查到的解决方法大多是给chrome添加启动参数：--allow-file-access-from-files，这样本地ajax请求就不会报跨域错误了。（注意如果给chrome添加多个启动参数，每个启动参数“--”之前要有空格隔开，如"C:ProgramFilesGoogleChromeApplicationchrome.exe"--enable-file-cookies--allow-file-access-from-files）。

但是导致这个跨域问题的是因为采用的协议不对，发布上线并不会有这种情况，所以个人觉得这种解决方法只是掩盖错误的测试方式，没有采用。

2. 本地配置成服务器环境

安装好tomcat，然后配置好环境变量（tomcat安装目录的bin目录即可，如下图）。

接着就可以在命令行里敲入catalina run，启动tomcat，访问一下 http://127.0.0.1:8080，出现了这个页面。

说明tomcat启动成功了，接着把自己写的整个项目（最上级目录）放入tomcat安装目录的webapps下，如：C:Program Filesapache-tomcat-8.0.26webapps。如果项目目录是test，那么放好之后可以用http://127.0.0.1:8080/test访问，这时用ajax load的内容成功显示在页面上。

除此以外，配成服务器环境测试还发现chrome本地不能存cookie的问题也得到解决。撒花！

（编辑：李大同）

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