提前说明：这里我用的是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. 编写你的第一个web应用程序1

    在shell中运行以下命令来检查django是否已安装及其版本 python -m django --version 如果django已经安装,你应该看到安装的版本号,如果还没有安装,你会看到一个‘n ...

  2. Buffer的数据存取

    缓冲区 存放要读取的数据 缓冲区 和 通道 配合使用 一个用于特定基本数据类行的容器.有java.nio包定义的,所有缓冲区都是抽象类Buffer的子类. Java NIO中的Buffer主要用于与N ...

  3. Vim设置括号自动补全和快速跳出

    一.设置括号自动补全 inoremap ' ''<ESC>i inoremap " ""<ESC>i inoremap ( ()<ESC&g ...

  4. Hadoop- 流量汇总程序之如何实现hadoop的序列化接口及代码实现

    流量汇总程序需求 统计每一个用户(手机号)锁耗费的总上行流量.下行流量.总流量. 流程剖析 阶段:map 读取一行数据,切分字段, 抽取手机号,上行流量,下行流量 context.write(手机号, ...

  5. jquery操作全选、批量删除、加减行

    --------------------------------------------------------------------------------------- html静态页面 --- ...

  6. listen 64

    Winning Athletes Engage in Arms Raise You see it when you watch almost any game: there's a touchdown ...

  7. skynet实践(9)-随机数重复问题

    最近在使用skynet的过程中,遇到需要为玩家的每次请求产生一个随机序列的场景.简化如下: main.lua中每隔1S便发出一次随机数请求: local skynet = require " ...

  8. 【boost】使用serialization库序列化子类

    boost.serialization库是一个非常强大又易用的序列化库,用于对象的保存与持久化等. 使用base_object可以在序列化子类的同时也序列化父类,以此获得足够的信息来从文件或网络数据中 ...

  9. linux命令学习笔记（45）：free 命令

    free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的 工具中,free命令是最经常使用的命令之一. ．命令格式: free [参 ...

  10. multitail

    multitail 在分隔的窗口查看你的日志