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

Posted 生活随笔杂文

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决本地调试导致的Ajax跨域问题相关的知识,希望对你有一定的参考价值。

点击上方"蓝字"
关注我们吧!


前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题。


写了Ajax在chrome测试时,会报错:

这是由于涉及到跨域问题!直接用浏览器打开是通过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:\ProgramFiles\Google\Chrome\Application\chrome.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 Files\apache-tomcat-8.0.26\webapps。如果项目目录是test,那么放好之后可以用http://127.0.0.1:8080/test访问,这时用ajax load的内容成功显示在页面上。


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


扫码关注我们

抢抓机遇,增创优势,再创辉煌。
携手2021年,为梦想启程!





以上是关于解决本地调试导致的Ajax跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

ajax 跨域,这是最全的解决方案!

ajax --- 解决ajax跨域请求导致session失效的问题

vue 本地调试接口跨域问题解决

wamp解决ajax跨域问题

Node.js配合node-http-proxy解决本地开发ajax跨域问题

阿里云OSS上传文件本地调试跨域问题解决