Ajax跨域一（跨域初识）

问题：什么是AJAX跨域问题？

答：产生跨域问题是原因前台需要大量调用后端接口，不在一个区域就产生跨域。

编写测试代码：

（1）被调用方后台代码编写；

（2）调用方前台代码编写

（3）引入前台Jasmine测试框架（js测试框架）

springBoot项目创建方式：

（1）通过官网start.spring.io创建springBoot，具体的可以参考官网。

（2）通过eclipse创建，但是eclipse要安装springBoot相关的插件。

安装成功之后类似于：

Ajax跨域一（跨域初识）

具体的创建过程：

（1）创建一个spring start project项目，如上图所示；

（2）一般修改下面几个输入参数：

Ajax跨域一（跨域初识）

（3）其中加入2个依赖，web：提供web服务的；DevTools:编写代码后自动重启，不要手动重启。即可创建完成。

Ajax跨域一（跨域初识）

项目目录（服务端与客户端）：

Ajax跨域一（跨域初识）

后端代码：

@RestController
@RequestMapping("/test")
public class TestController {
    @GetMapping("/get1")
    private ResultBean get1(){
        System.out.println("TestController.get1()");
        return new ResultBean("get1 ok");
    }
}

启动项目：

Ajax跨域一（跨域初识）

　　启动ajaxclient1项目，注意yml配置填写的格式必须要正确（尤其是空格，建议使用有格式校验的软件工具，如：IDE）

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX跨越完全讲解</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<a href="#" οnclick="get1()">发生get1请求</a>
<img alt="" src="http://localhost:8080/test/get1">
<script>
  function get1() {
    $.getJSON("http://localhost:8080/test/get1").then(function(result) {
        console.log(result);
    });
  }
</script>
</body>
</html>

报错：

Ajax跨域一（跨域初识）

　　前端js测试框架，Jasmine框架（官网：jasmine.github.io）下载相关的包，导入到工程中即可：

Ajax跨域一（跨域初识）

前端测试代码：

（1）首先引入js框架：

<link rel="stylesheet" type="text/css" href="jasmine-2.8.0/jasmine.css">
<script src="jasmine-2.8.0/jasmine.js"></script>
<script src="jasmine-2.8.0/jasmine-html.js"></script>
<script src="jasmine-2.8.0/boot.js"></script>

（2）测试代码：

//每一个测试用例的超时时间
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// 请求的接口的前缀 // http://localhost:8080/test  "/ajaxserverapache";
//var base = "http://localhost:8080/test";
var base = "http://b.com/test";
//var base = "/ajaxserver";
//测试模块
describe("ajax跨越完全讲解", function() {
    // 测试方法
    it("get1请求", function(done) {
        // 服务器返回的结果
        var result; //初始化是undifined
        $.getJSON(base + "/get1").then(function(jsonObj) {
            result = jsonObj; //当执行失败之后，此处代码不会执行
        });
        // 由于是异步请求，需要使用setTimeout来校验
        setTimeout(function() {
            expect(result).toEqual({
                "data" : "get1 ok"
            });

            // 校验完成，通知jasmine框架
            done();
        }, 100);
    });
});

引入Jasmine框架之后的效果是：

Ajax跨域一（跨域初识）

为什么会发生AJAX跨域？

（1）浏览器的限制：当浏览器发现你的请求是跨域的时候，会做校验，如果校验不通过，将会报跨域安全问题；

（2）跨域：发出去的请求只要域名，端口，协议中有一个不同，都会产生跨域；

（3）发送的是xhr（XMLHTTPRequest）请求，如果发送的不是xhr请求，就算是跨域，浏览器也不会报错。

总而言之：不是服务器后台不允许前台访问，而是浏览器出于安全的考虑所做的访问限制。

解决思路：

（1）让浏览器不做限制，指定参数，让浏览器不做校验，但该方法不太合理，它需要每个人都去做改动；

（2）不要发出XHR请求，这样就算是跨域，浏览器也不会报错，解决方案是JSONP，通过动态创建一个script，通过script发出请求；

（3）在跨域的角度：一种是被调用方修改代码，加上字段，告诉浏览器，支持跨域；调用方隐藏跨域（通过代理）。

从2个方面考虑：

（1）被调用方支持跨域解决思路：基于http协议关于跨域方面的要求而做的修改，从a域名调用b域名时，在b域名返回的信息里加些字段，告诉浏览器b允许a调用。浏览器通过校验就不会报跨域安全问题。

（2）调用方隐藏跨域解决思路：当域名不是自己公司的时，可以用此方法解决。通过一个代理，使得从浏览器发出的请求都是a域名的请求，在代理里面把指定的url转到b域名里面,使得在浏览器上看上去就是同一个域名。（调用方修改Apache或者Nginx静态服务器，通过静态服务器隐藏调用请求返回给前台，前台以为是同一个地址和端口的请求就解决了跨域问题。）

代码下载地址：https://download.****.net/download/lowi313804/10584874

Ajax跨域一（跨域初识）

相关推荐