提前说明：这里我用的是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. Android 虚拟机 程序安装目录

    Android应用安装涉及到如下几个目录:system/app系统自带的应用程序,无法删除.data/app用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录.data/data存放应用程 ...

  2. Database: key

    super-key: Any key that has more columns than necessary to uniquely identify each row in the table i ...

  3. kvm初体验之三：vm的安装及管理

    Host: CentOS release 6.4 (Final) Guest: CentOS release 6.6 (Final) 全程以root身份操作 1. host上创建桥br0 参考< ...

  4. 跨线程send message

    今天同事问了一个问题,说在线程中send message 和直接调用是不是一样,他觉得是一样的,但是线程跟踪却发现处理过程是在接收消息队列完成.回家看到博客园上的一番争论才有些明白,这里贴出来,共勉 ...

  5. python function with variadic arguments or keywords(dict) 可变参数与关键字参数

    *args 表示任意个普通参数,调用的时候自动组装为一个tuple **kwags 表示任意个字典类型参数, 调用的时候自动组装成一个dict args和kwags是两个约定俗成的用法. 变长参数可以 ...

  6. string类封装

    class cMyString{ char* m_str; int m_strSize;public: cMyString();//指针指向一个空字符串 cMyString(char* str);// ...

  7. ACM学习历程—BestCoder 2015百度之星资格赛1006 单调区间（组合数学）

    Problem Description 百小度最近在逛博客,然后发现了一个有趣的问题. 如下图所示,是一个12 位数014326951987 , 它的数字先逐渐变大, 然后变小,再变大,接着变小,又变 ...

  8. 【LeetCode】027. Remove Element

    题目: Given an array and a value, remove all instances of that value in place and return the new lengt ...

  9. 使用msiexec提取msi包里的文件

    核心:如需把d盘下abc.msi文件解包到目录d:\abc,操作如下:打开命令提示符,输入msiexec /a "d:\abc.msi" /qb TARGETDIR="D ...

  10. NOI.AC 31 MST——整数划分相关的图论(生成树、哈希)

    题目:http://noi.ac/problem/31 模拟 kruscal 的建最小生成树的过程,我们应该把树边一条一条加进去:在加下一条之前先把权值在这一条到下一条的之间的那些边都连上.连的时候要 ...