禁止浏览器校验启动方式：

4、Filter解决跨域方案

问题1：浏览器是先执行请求还是先判断跨域？

    浏览器请求-->判断响应中是否有允许跨域-->发现不允许跨域,阻止跨域

    说明：当执行跨域请求时，浏览器会提示当前接口不被允许，这说明浏览器已发出了当前请求，但是它的的响应内容被拦截；如果在Response header中的Access-Control-Allow-Origin设置的允许访问源不包含当前源，则拒绝数据返回给当前源。

问题2：判断当前请求是否是跨域请求的方法？

    通过查看当前请求的Request Headers 中是否存在Origin属性，当前属性存储的是当前域的信息

在被调用方解决跨域（支持跨域）通过自定义Filter来实现：

    1、在SpringBoot工程创建自定拦截器CrosFilter，如图：

    2、 注册自定拦截器CrosFilter，作用于全局如图：

问题3：什么是简单请求和非简单请求？

    说明：浏览器在发送跨域请求时会先判断当前请求是不是简单请求，如果是简单请求浏览器则会先执行请求，再判断是否支持跨域；如果是非简单请求它会先发送一个预检命令（即OPTIONS请求），检查通过后再把当前请求发出去。

    1、简单请求：

        方法为GET、HEAD、POST的请求，并且请求头（header）里面没有自定义头；Content-Type为text/plain、multipart/form-data、application/x-www-form-urlencoded。

    2、非简单请求：

        方法为PUT、DELETE的请求，发送JSON格式的ajax请求、带自定义请求头的ajax请求。

    例子：发送JSON格式的ajax请求

问题4：Access-Control-Allow-Headers是什么？有什么作用？

    响应头部 Access-Control-Allow-Headers 用于 preflight request （预检请求）中，列出了将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息。简单首部，如 simple headers、Accept、Accept-Language、Content-Language、Content-Type （只限于解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种MIME类型（不包括参数）），它们始终是被支持的，不需要在这个首部特意列出。

问题5：Access-Control-Max-Age是什么？

浏览器的同源策略，就是出于安全考虑，浏览器会限制从脚本发起的跨域HTTP请求（比如异步请求GET, POST, PUT, DELETE, OPTIONS等等），所以浏览器会向所请求的服务器发起两次请求，第一次是浏览器使用OPTIONS方法发起一个预检请求，第二次才是真正的异步请求，第一次的预检请求获知服务器是否允许该跨域请求：如果允许，才发起第二次真实的请求；如果不允许，则拦截第二次请求。Access-Control-Max-Age用来指定本次预检请求的有效期，单位为秒，，在此期间不用发出另一条预检请求。

    例如：res.addHeader("Access-Control-Max-Age", "3600")，表示隔60分钟才发起预检请求

3、JSONP如何解决跨域

    1、什么是JSONP?

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

    2、JSONP处理跨域的原理

    在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

    举例：假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

    {"id": 123, "name" : 张三, "age": 17}

    那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下： 

    foo({"id": 123, "name" : 张三, "age": 17});

    当然，如果服务端考虑得更加充分，返回的数据可能如下： 

    try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

    这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo： 便可以使用foo函数来调用返回的数据了。

在JQuery中使用JSONP解决跨域

解决一：指定ajax请求的dataType属性为jsonp

$.ajax({
        dataType: 'jsonp',
        url: 'http://www.a.com/user?id=123',
        success: function(data){
                //处理data数据
        }
});

解决二：使用getJSON，只要在请求地址中加上callback=?参数可： 

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
        //处理data数据
});
或者是
function foo(data){
        //处理data数据
}

$.getJSON('http://www.a.com/user?id=123&callback=foo');

2、为什么会发生跨域问题？

    1、浏览器限制； 

    2、跨域（域名，端口不一样都是跨域）；

    3、XHR（XMLHttpRequest请求）；同时满足以上三个条件就会产生跨域。

解决跨域的方法

    1，从浏览器出发，允许浏览器跨域。

        思路：通过命令行修改浏览器启动参数，使得浏览器不进行跨域检查，从而允许跨域

        方法：命令行参数启动浏览器后添加参数--disable-web-security

        例：chrome --disable-web-security

        --disabl-web-security参数的作用是禁止浏览器进行跨域检查

        但是，这种方法有三个缺点：

            1.每次启动浏览器都需要通过命令行启动，太过繁琐

            2.该方法会导致安全性方面的问题

            3.该方法是客户端方面的改动，在实际使用中，在每个客户端上都禁止浏览器进行跨域检查不太现实，所以实用性较低。

    总的来说，该方法虽然可以解决跨域问题，但是价值不大。在实际项目中，主要对服务器端进行改动使得支持跨域。

    2，从XHR（XMLHttpRequest）出发

    （1）避免发生跨域。使用jsonp，由于jsonp请求是通过script的方式发送的（只有xhr的请求方式才有可能产生跨域问题），所以不会产生跨域问题。Spring MVC实现过程：前台使用ajax的get请求，将dataType设为“jsonp”；服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端，只能使用get方式请求，服务器需要改动代码，发送的不是xhr请求。

（2）产生跨域后解决。

            从被调用方考虑，有三种情况，分别是服务器实现，nginx配置和apache配置。

            服务器实现需要注意两种情况，简单请求和非简单请求。简单请求是先执行请求再验证，非简单请求是先验证再请求。

          简单请求（比较常见）：方法为get，head，post,请求header里面没有自定义头，Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

            非简单请求（比较常见）：put,delect方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

            简单请求处理方案：在响应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨省域时，请求头Origin的值，所以一般是获取Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法。

            非简单请求处理方案：在相应头中添加

                Access-Control-Allow-Origin=“允许跨域的url”，即跨域时，可以获取请求头Origin的值。

                Access-Control-Allow-Method=“*”，允许的方法

                Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

             带cookies的跨域解决：在响应头添加

                Access-Control-Allow-Credentials,="true"，允许使用cookies

     ngnix配置：

1、前端测试框架Jasmine

jasmine 是一个行为驱动开发(TDD)测试框架， 一个js测试框架，它不依赖于浏览器、dom或其他js框架；jasmine有十分简介的语法。

下载：https://github.com/jasmine/jasmine/releases

官方参考API：https://www.cnblogs.com/stephenykk/p/4539200.html

解决思路：

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

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

3. 在跨域的角度：一种是被调用方修改代码，加上字段，告诉浏览器，支持跨域，支持调用方调

Ajax跨域受哪些条件限制：

1. 浏览器限制不允许跨域；

2. 访问的域和请求页的域不同；

3. 使用XHR（XMLHttpRequest）请求，不允许跨域

Ajax跨域受哪些条件限制：

1. 浏览器限制不允许跨域；

2. 访问的域和请求页的域不同；

3. 使用XHR（XMLHttpRequest）请求，不允许跨域

4. 
   

反向代理，隐藏

nginx 配置 

创建controller时重新创建了一个包放TestController.java和ResultBean.java，导致在启动后访问时，报404，解决：将这两个文件和AjaxserverApplication.java放在一个包中

禁止浏览器做检查校验

在Dos中 浏览器应用对应文件Appliction文件夹下输入

chrome --disable-web-security --user-data-dir=g:\temp3

解决思路：

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

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

3. 在跨域的角度：一种是被调用方修改代码，加上字段，告诉浏览器，支持跨域，支持调用方调用。第二种是调用方使用代理，在a域名里面的的请求地址使用代理指定到b域名。第一种是支持跨域，第二种是隐藏跨域

发生跨域安全的问题的原因，三者都满足

使用nginx解决跨域