提前说明：这里我用的是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. Redis 的持久化与过期键

    简介 Redis 是使用非常广泛的 Key-Value 内存数据库.因为数据都存放在内存中,所以存取速度非常快.不过,很多情况下我们需要将 Redis 中的数据保存到硬盘中以便做备份.Redis 提供 ...

  2. 获取HDC的几种方法

    当需要在显示器上(当然包括打印机等设备上)绘图时,或者写文字的时候,需要取得设备的上下文句柄,即HDC,本文以下都称为HDC.那么,有哪些办法取得HDC呢? 1 BeginPain()和EndPain ...

  3. BZOJ(begin) 1328 [Usaco2003 Open]Jumping Cows：贪心【波峰波谷模型】

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1328 题意: 给你一个长度为n的正整数序列. 可以选任意个数字,只能从左往右选. 偶数 ...

  4. Linux_学习_01_ 压缩文件夹

    二.参考资料 1.Linux下压缩某个文件夹命令

  5. linux 加载raid驱动

    Driver Disk Installation Guide for ARC-11XX/ARC12XX/ARC16XX/18XX RAID Controller on RHEL 5.11 or Cen ...

  6. 解决 ssh 链接慢问题

    sed -i 's/GSSAPIAuthentication yes/GSSAPIAuthentication no/' /etc/ssh/sshd_configsed -i '/#UseDNS ye ...

  7. 制定一套适合自己团队的GITflow标准化工作流

    Git作为分布式代码管理的“当红炸子鸡”,被越来越多团队使用.当团队多个人员在同一个Git仓库上进行代码开发,没有一套标准化流程,将会引起代码管理的混乱,上线流程的迷茫,影响工作效率.制定一套适合自己 ...

  8. uC/OS-II源码分析（五）

    每个任务被赋予不同的优先级等级,从0 级到最低优先级OS_LOWEST_PR1O,包括0 和 OS_LOWEST_PR1O 在内.当μC/OS-Ⅱ初始化的时候,最低优先级OS_LOWEST_PR1O  ...

  9. MySql 扩展存储引擎

    MySql 扩展存储引擎 下面介绍几个列式存储引擎(都有两个版本:社区版.商业版): 一:TokuDB TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Toku ...

  10. sublime插件insertDate显示ISO时间

    1 下载insertDate插件以及安装完毕 2 把光标放在想插入ISO时间的地方 3 按住:alt+f5,之后,在sublime下面的Date format string输入:iso.之后按ente ...