Ajax那些年遇到的坑

Posted 2022-01-28 hros

提前说明：这里我用的是Windows系统，所以解决问题的方法也是仅限Windows系统

第一个坑：Access to XMLHttpRequest at ‘file:///C:/Users/as/Desktop/Web/Ajax/test.json?t=089038120798779‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

说明：所请求数据的地址的协议只能是HTTP、Data、Chrome、Chrome-Extension、HTTPS

问题产生的原因：直接在本地打开你编写的Ajax的html文件使用的是ftp协议

解决方法：将HTML文件放在服务器上打开，这样就是使用的http协议，我这里用到的方法是配置一个Tomcat服务器

　　（1）.在下载Tomcat之前需要先安装JDK(Java集成开发环境)，因为Tomcat是依赖于JDK的

　　（2）.配置JDK的系统环境变量

　　（3）.下载Tomcat

　　（4）.将Tomcat解压后的包，如：apache-tomcat-9.0.21，放到某个盘符里面，这里我放在E盘里面

　　（5）.打开cmd，定位到E盘下Tomcat包的bin目录下，操作如下：

　　　　a.输入 " E: " ，回车

　　　　b.输入 " cd apache-tomcat-9.0.21\bin"

　　　　c.输入service.bat install

　　　　d.输入 "startup.bat"，开启Tomcat服务，之后会显示安装成功

　　　　e.打开浏览器输入 "localhost：8080"，如果显示的是Apache界面，说明服务成功启动

　　（6）.接下来你只需要把所需要访问的文件放置在 apache-tomcat-9.0.21 文件夹里面的webapps文件夹下，然后通过Ajax访问即可（注意在文件前面加上http://localhost:8080/）

 

第二个也不算是坑，是关于 Ajax的 跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

问题产生的原因：发出Ajax的文件与所需要请求的文件所在的 域名 或 端口号 是不同的。

分析：如果按照第一个坑的解决方法把所有文件都放在了 webapps 文件夹下是不会产生跨域问题的，所以我们需要制造跨域问题来解决它

　　（1）.把发起 Ajax 请求的文件放到一个普通的目录下，即不放在 Tomcat 的 webapps 文件夹里面即可，可以放到桌面上

　　（2）.把 Ajax 要请求的数据放在 Tomcat 服务器下的 webapps 文件夹下，这样就会产生跨域问题

 

------------------------------------------------------------------------------------------------

明天继续