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

第一个坑：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.

问题产生的原因：

　　（1）.发出Ajax请求的文件与所需要请求的文件所在的 域名 或 端口号 或 协议 有一项是不同的。

　　（2）.发出的请求类型是 xhr

　　（3）.浏览器限制，也就是浏览器不允许你跨域请求

　　只有以上三点全部满足才会出现跨域问题，换一种说法就是解决上面的任何一点就可以解决跨域问题，从上面我们也可以看出来跨域问题是浏览器产生的，服务器是不对你的请求做限制的

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

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

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

解决方法：

　　(1).我们先来解决浏览器的限制问题，这个比较简单，但是不实用，因为这是在客户端做的更改

　　　　本机的文件目录结构：

　　发起Ajax请求的文件：

　　

　　Ajax.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Ajax浏览器限制问题解决</title>
</head>
<body>
  <div id="content"></div>
  <button id="btn">点击通过Ajax获取信息</button>
  <script>
    const btn = document.getElementById('btn'),
          content= document.getElementById('content');
    btn.onclick = function(){
      const xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.onreadystatechange = function(){
        //当服务器正常工作(status = 200)并且浏览器将服务器传回的数据全部解析完成(raedyState = 4)的时候执行的语句
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          const data = xmlhttp.responseText;
          console.log(typeof data); //服务器返回的数据默认是字符串类型的
          const json = JSON.parse(data); //将字符串转换成JSON格式
          content.innerHTML = json.name; //将获取到的JSON的name传到content中
        }
      }
      //连接服务器
      xmlhttp.open("get", "http://localhost:8080/Ajax/test.json?t="+Math.random(), true);
      //发送请求
      xmlhttp.send();
    }
  </script>
</body>
</html>

　　Ajax请求的数据：

　　

　　test.json文件：

{
  "name": "Jeck",
  "age": "10",
  "sex": "main"
}

　　　　a.打开cmd，定位到Chrome启动目录，在桌面的快捷方式右键属性即可查看，比如我的是：cd C:\Users\as\AppData\Local\Google\Chrome\Application\

　　　　b.输入 chrome --disable-web-security --user-data-dir="本地发起Ajax请求的文件目录" ，这样在该目录下系统会自动创建一些目录文件

　　　　c.之后系统会为我们打开一个非安全模式的 Chrome 浏览器，在地址栏访问发起 Ajax 的文件， 比如：C:\Users\as\Desktop\文件\Web\Ajax\Ajax.html

　　　　d.之后点击按钮发送 Ajax 请求即可

　　这种解决跨域问题的方法大家也就能看出是特别鸡肋的了，有哪个用户的浏览器会开启这种模式，所以这种方法知道就好，没啥实用

　　（2）.使用JSONP的方式解决跨域问题，解决的原理也就是不返回 xhr 数据类型，而是返回 JSONP 格式的数据

　　　　

Ajax遇到的那些坑的更多相关文章

  1. datatables ajax后端请求那些坑

    在对datatables做后端数据填充的时候,遇到一个,翻页问题.在多次操作翻页后,总是提示加载中.反了很多博客没有找到原因. 经过测试,发现原来自己坑了自己. 代码如下: datatables : ...

  2. ajax同步与异步的坑

      之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...

  3. 使用pace监控ajax踩过的坑

    使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...

  4. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听

    一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...

  5. ajax application/json 的坑

    我们习惯使用application/json方式提交,所以会在ajax中指定contentType. $.ajax({ url: "http://localhost:3000", ...

  6. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面

    一.引言 接着上一篇,京东个人中心的所有功能数据分析完成之后,现在需要把静态页面完成,实现过程中要用到的技术有:Bootstrap.html5表单新特性等.除此之外,还要利用Node.js的Expre ...

  7. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析

    一.引言 在学习了Nodejs和HTML5之后,发现了Nodejs的使用很方便,和php是完全不同的另一种后台语言.我也明白了,在一个项目里,是不可能同时存在Apach服务器(php)和Web服务器( ...

  8. $.ajax 中的contentType 坑坑

    $.ajax 设置数据类型 applicaiton/json之后,服务器端(express)就拿不到数据. $.ajax 中的 contentType 和 dataType: contentType ...

  9. SpringMVC实现AJax以及RestFull风格

    RestFull风格就是url路径中不能出现?不能带参数,如https://www.baidu.com/user/item/1234这个格式,也叫url资源定位 1.需要在web.xml中开启put, ...

随机推荐

  1. Java互斥语义的实现

    锁 对象头(Object Header) HotSpot 虚拟机的对象头包括两部分信息:Mark Word(标记字段)和 Klass Pointer(类型指针)   Mark Word 用于存储对象自 ...

  2. 05-树8 File Transfer（25 point(s)） 【并查集】

    05-树8 File Transfer(25 point(s)) We have a network of computers and a list of bi-directional connect ...

  3. mysql服务突然不能启动

    mysql之前一直用的好好的,今天突然不能启动.前几天改过my.ini文件,在[mysqld]下添加了default-character-set=utf8.查看日志发现是添加的那句话的错误,删除.并且 ...

  4. c++迷宫小游戏

    c++迷宫小游戏 一.总结 一句话总结: 显示:根据map数组输出图像 走动:修改map数组的值,每走一步重新刷新一下图像就好 1.如果走函数用z(),出现输入s会向下走多步的情况,原因是什么? 向下 ...

  5. ACM学习历程—HDU5410 CRB and His Birthday（动态规划）

    Problem Description Today is CRB's birthday. His mom decided to buy many presents for her lovely son ...

  6. tyvj1015公路乘车——DP

    题目:http://www.joyoi.cn/problem/tyvj-1015 代码如下: #include<iostream> #include<cstdio> using ...

  7. Spring 3.1新特性之三：Spring对声明式缓存的支持

    一.概述: Spring 3.1 引入了激动人心的基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如EHCache 或者 OSCache),而是一个对缓 ...

  8. DCloud-HTML5+：barcode

    ylbtech-DCloud:barcode&camera 1.返回顶部 1. http://www.html5plus.org/doc/zh_cn/barcode.html 2. Barco ...

  9. shell 统计词频脚本

    #!/bin/bash if [ $# -ne 1 ]; then echo "Usage:$0 filename"; exit -1 fi filename=$1 egrep - ...

  10. Sleep 比对 (Win32API 与 STL )

    OutputDebugStringA("begin 1========"); for (int i = 0; i < 1800; i++) { Sleep(2); } Out ...