jquery ajax跨域-ajax跨域解决方案 收藏 0

vue – Vue中的ajax

只有在ajax才能找回一点点主场了，vue中的ajax一天整完，内容还行，主要是对axios的运用。明天按理说要开始vuex了，这个从来都是只耳闻没有眼见过，明天来看看看看是个什么神奇的东西。

首先我们能发起ajax请求的，xhr原生不推荐、jQuery也不封装得有但是也不推荐，因为要操作DOM，然后就是axios，它的体积比jQuery而且他是专门处理数据请求的，他还是promise风格的，jq和axios都是基于xhr来封装的，如果没有了xhr他们就没有了，但是这个fetch是跟xhr同级的也是原生的，不基于xhr，而且也是promise风格的，他的问题是兼容性差

开启两个本地的node服务器，通过axios来获取数据，先下载axios并导入，注意一下，axios的使用，调用get、post以及ajax综合请求等，还有后面then回调会有返回成功或者失败的函数

果不其然，当我们点击直接就跨域了，我们解决跨域一般三种方法，

cors是配置在后端node里面的，但是它的缺点就是，不能随便使用响应头，要配置本公司内容能请求的响应头，不然用它默认的是个人都可以请求我们服务器的数据了

然后jsonp就不用说了，虽然可以配置在前端，但是只限于get，局限性太大了

最后还剩下一种，以前没有学过的-代理，它的原理是这样的，在前端和服务器之间来一个中间代理服务器，保持跟前端一样的协议端口号等，这样一来前端从代理服务器请求发起资源都没问题了，为什么代理服务器和服务器不一样却可以互相拿资源？因为同源策略使我们浏览器的策略，服务器之间没得这种协议，随便访问

我们这里通过vue-cli来开启代理服务器，通过配置vue.config.js也就是前面说过的，vue-cli的配置文件，所以需要在vue-cli官网的配置参考找到 devServer.proxy,直接拿过来配置即可，这里要注意，这个地址是写的你要请求的api服务器地址，而且不用写具体下面哪个路径，写到端口号就够了，因为它是自动代理服务器的端口号为我们vue-cli服务器的端口号

还有最后一步别忘记改了，在我们axios请求那里将请求的服务器改为代理服务器其实也相当于就是自己的vue-cli这个服务器，以为他们两个是一样的，同时你可以理解为代理服务器现在有了api服务器的资源，所以真正要请求的路径在这里填写

但是这个方法有两个问题

• 一个是我们转发的服务器只能设置一个，多个不行
• 一个这个代理服务器，如果本身服务器身上有会默认去拿自身服务器上的，什么叫做自身服务器上的，在我们public文件夹下面的都是8080服务器端口上挂载的文件
• 那么问题来了，我如果自己也有个student的文件
• 这个时候再去拿就是我们自己服务器上的这个students的资源了

同样是参照官网cli的devServer.proxy第二段代码，他那里复制过来是这样的，后面会增删一些内容

首先/api相当于给你挂前缀了，但是只是拿来绕开vue-cli的本地服务器的查找机制，我有前缀就不是找你public下面的东西了，就算你也有students，也不关我的事，然后target就为我们的服务器地址，下面ws表示支持websocket，changeOrigin表示控制请求头中的host值（其实就是要不要撒谎的意思，为fasle，当我们代理服务器访问api服务器，代理服务器的端口号就为8080，如果为true，那么他就会跟着api服务器的端口号走，假装告诉你我也是5000，以防有些api服务器开启限制，必须同端口号的服务器才能访问），后面这两个配置不写也默认为true，当然这样还没完，还有一个关键配置，cli官网没给我们写出来，要配置一个pathRewrite的属性，值为一个对象，里面内容表示把以什么前缀开头的这个字段转换为空字符串，为什么要这么做，因为我刚才说的，我们添加这个前缀只是为了绕过前端这一块，解决那个本地服务器和api服务器都有相同的资源，会先去找本地服务器的情况，如果进入api服务器还去找这么一个地址，那他下面根本没得我们的heymar前缀，所以就会报错，需要注意的是这里的正则并不需要字面量来包裹，直接引号包起就可以了

然后记得将我们的axios的请求添加前缀

这个时候就算我们public下面有同名的文件，也不会访问到他了

如果我们有多个服务器，直接接着配置在下面即可

搜索关键字可以把github的用户名字及头像显示出来

组件化编程先拆组件，搜索为一个组件search，下面列表展示为一个组价list,我们这里引入了bootstrap.css,引入这些外部的文件有两种方式，一种是在我们src下面创建一个文件夹，assets专门来放这些，通过import引入

可以看到用这种方式引入，页面编译报错了，找不到这些字体文件，因为我就单纯引入了一个bootstrap.css也用不到这些字体文件，这里就要说到import的规则了，import导入是严格导入，他会去找你这个文件所有的依赖都要准备完毕才会给你编译成功，所以这里我们还有第二个方法，在public下面创建一个css文件夹，然后通过index.html我们link方式来导入，link就不会给你检查这么多了，这里也要尊重他的一个语法规则，前面要添加上一些参数

依照前面的思想，静态页面创建完毕，组件划分好后，第二步应该开始创建动态数据了，在这个案例，input输入的值是我们的数据，list每一个展示出来的用户信息是我们的数据，先把input的值搞好，用v-model绑定数据

当我们点击就去发送请求，通过关键字回来的参数再通过全局事件总线将数据发给我们的list

我们只要这三个数据，头像地址，用户github网址，用户名字

收到数据通过v-for渲染到页面

我们整个案例list界面其实要分为四个界面才完善，搜索出来的用户列表只是其中一个，还有刚开始进来的欢迎界面，点击搜索的loading界面，以及失败后的错误界面，很明显这里要用条件渲染，写上四个界面

主要是他们的条件是什么？结合前面的案例，一般条件渲染要控制几个页面的显示隐藏，至少都得有一个开关也就是变量，来判断他该显示还是隐藏，那么这里应该有四个开关，来表示四种不同的界面，首先welcome这个界面简单，一上来就为true，当我们点击搜索就将loading改为true，直到获取到请求，将它改为false，将用户列表的页面改为true也可以，但为了保险起见最好改为userInfo的长度，要有长度才是真正的得到数据了，错误信息这里一直都是false，知道进入错误的回调才为true

由于我们要一点击就将wel改为false，将loading改为true，所以需要将数据传到search这个界面，一旦点击就会触发这个自定义时间，会发送过来一个对象数据

list接受这边，为了能够直接赋值最好也将刚才定义的数据都装到一个对象里面去，接收到search传过来的对象就可以直接赋值，这样的好处不仅是方便，而且传过来的数据也语义化一点，不然就只能是传过来true，false等，我这边让每一个值等于这些值

一直到我们获取到数据，又传过来一个新的对象，重新赋值新的对象

这里有一个小注意点：因为我们的wel界面是一刷新就有，后面不可能再出现了，所以后面传过来的数据都不带wel这个参数的，你又以对象赋的值，所以只会导致一种情况

结构被改了，这里可以用到，es6的扩展运算符，主要是把这个要用起来，用处还是蛮多的

是比较老的一个ajax请求库，除了xhr、jq、axios、fetch后有多出了一个，它是vue的一个 插件库，所以说要在入口文件导入并注册

前面也说过，只要插件一注册，那么下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一样，就连返回值都一样，也是promise风格

可以让父组件向子组件指定位置插入html结构

要完成这样一个界面，是不是得把其中一个拿来作为组件后面的直接复用即可

这里传值有一个注意点，因为我们每个组件标签都是一个组件收到的数据也是不一样的，所以可以取一样的名字，到时候遍历出来各是各的

props接收数据，渲染即可

现在更新需求，我们有两个广告商美食这边只放他的图片，电影这边只放他的电影

这个时候就要用到插槽了，以前从没有在组件标签里面写过标签体吧，插槽就是要在这里面写

先不要管其他的，如果在组建标签里面写了标签体，还需要一个关键步骤，因为vue能够解析你的标签，但是他不知道放在哪里，也就是放在list这个组件的哪里，所以需要我们在组件模板里面用一个标签 slot来占位

这就是我们的slot插槽，但是由于组件里面的内容改动，后面也不能直接传数据进去了，也要把对应的位置内容提到组件标签这里来写

注意当我们slot部分没有内容传进来的时候，slot标签里面的内容就是默认值

就是具有名字的插槽，我们上面是一个插槽，可能不需要名字，但是如果有多个插槽，要插往不同的地方呢

首先给slot添加name属性

然后在我们标签体这边，谁要往哪个插槽添加信息，就把他的 slot属性写为谁

注意

当我想把一大段代码加入到一个slot插槽，但是我又不能一个一个去写，就有点耗时间了，可以将他们都包在一个div里面然后给div洗衣歌slot，但是这样就影响页面布局了，我们也可以写一个template标签包在这里面就不会影响布局了

如果用到了template，那么vue2.6很新的的一个更新，template可以这样来写slot名字，键值对，而且没有引号

这个写法只能应用于template标签

什么时候要用到这个作用域插槽

数据在组件的自身，但根据数据生成的数据结构需要组建的使用者来决定

就是数据没有在我们的插槽的使用者这里，什么叫做插槽的使用者，就是我们slot不是等着标签来填充吗，谁来填充这个插槽谁就是使用者，就比如说上面这个案例，这个template就是插槽的使用者

我把数据转移到list里面去，那么app里面定义的这些games，这些list标签也就是插槽的使用者都用不到数据了，数据转移到list里面去了，现在的情况就很像作用域发生了变化，list这个作用域里面可以使用games，但是插槽使用者在app里面就用不到，这个时候就要用到作用域插槽了

怎么来用，首先要知道一句话，插槽的动态绑定，是把这个数据送到他的使用者，注意是使用者，并不是平时这样是送到下级

我们使用者这边怎么来接受这个参数呢？必须使用template标签，并且里面写一个属性scope没有d，他的值随便取，就是一个对象，这里面包含了slot传过来的所有数据，如果就传过来了一个data那就是值.data就可以取到

————恢复内容开始————只有在ajax才能找回一点点主场了，vue中的ajax一天整完，内容还行，主要是对axios的运用。明天按理说要开始vuex了，这个从来都是只耳闻没有眼见过，明天来看看看看是个什么神奇的东西。

首先我们能发起ajax请求的，xhr原生不推荐、jQuery也不封装得有但是也不推荐，因为要操作DOM，然后就是axios，它的体积比jQuery而且他是专门处理数据请求的，他还是promise风格的，jq和axios都是基于xhr来封装的，如果没有了xhr他们就没有了，但是这个fetch是跟xhr同级的也是原生的，不基于xhr，而且也是promise风格的，他的问题是兼容性差

开启两个本地的node服务器，通过axios来获取数据，先下载axios并导入，注意一下，axios的使用，调用get、post以及ajax综合请求等，还有后面then回调会有返回成功或者失败的函数

果不其然，当我们点击直接就跨域了，我们解决跨域一般三种方法，

cors是配置在后端node里面的，但是它的缺点就是，不能随便使用响应头，要配置本公司内容能请求的响应头，不然用它默认的是个人都可以请求我们服务器的数据了

然后jsonp就不用说了，虽然可以配置在前端，但是只限于get，局限性太大了

最后还剩下一种，以前没有学过的-代理，它的原理是这样的，在前端和服务器之间来一个中间代理服务器，保持跟前端一样的协议端口号等，这样一来前端从代理服务器请求发起资源都没问题了，为什么代理服务器和服务器不一样却可以互相拿资源？因为同源策略使我们浏览器的策略，服务器之间没得这种协议，随便访问

我们这里通过vue-cli来开启代理服务器，通过配置vue.config.js也就是前面说过的，vue-cli的配置文件，所以需要在vue-cli官网的配置参考找到 devServer.proxy,直接拿过来配置即可，这里要注意，这个地址是写的你要请求的api服务器地址，而且不用写具体下面哪个路径，写到端口号就够了，因为它是自动代理服务器的端口号为我们vue-cli服务器的端口号

还有最后一步别忘记改了，在我们axios请求那里将请求的服务器改为代理服务器其实也相当于就是自己的vue-cli这个服务器，以为他们两个是一样的，同时你可以理解为代理服务器现在有了api服务器的资源，所以真正要请求的路径在这里填写

但是这个方法有两个问题

• 一个是我们转发的服务器只能设置一个，多个不行
• 一个这个代理服务器，如果本身服务器身上有会默认去拿自身服务器上的，什么叫做自身服务器上的，在我们public文件夹下面的都是8080服务器端口上挂载的文件
• 那么问题来了，我如果自己也有个student的文件
• 这个时候再去拿就是我们自己服务器上的这个students的资源了

同样是参照官网cli的devServer.proxy第二段代码，他那里复制过来是这样的，后面会增删一些内容

首先/api相当于给你挂前缀了，但是只是拿来绕开vue-cli的本地服务器的查找机制，我有前缀就不是找你public下面的东西了，就算你也有students，也不关我的事，然后target就为我们的服务器地址，下面ws表示支持websocket，changeOrigin表示控制请求头中的host值（其实就是要不要撒谎的意思，为fasle，当我们代理服务器访问api服务器，代理服务器的端口号就为8080，如果为true，那么他就会跟着api服务器的端口号走，假装告诉你我也是5000，以防有些api服务器开启限制，必须同端口号的服务器才能访问），后面这两个配置不写也默认为true，当然这样还没完，还有一个关键配置，cli官网没给我们写出来，要配置一个pathRewrite的属性，值为一个对象，里面内容表示把以什么前缀开头的这个字段转换为空字符串，为什么要这么做，因为我刚才说的，我们添加这个前缀只是为了绕过前端这一块，解决那个本地服务器和api服务器都有相同的资源，会先去找本地服务器的情况，如果进入api服务器还去找这么一个地址，那他下面根本没得我们的heymar前缀，所以就会报错，需要注意的是这里的正则并不需要字面量来包裹，直接引号包起就可以了

然后记得将我们的axios的请求添加前缀

这个时候就算我们public下面有同名的文件，也不会访问到他了

如果我们有多个服务器，直接接着配置在下面即可

搜索关键字可以把github的用户名字及头像显示出来

组件化编程先拆组件，搜索为一个组件search，下面列表展示为一个组价list,我们这里引入了bootstrap.css,引入这些外部的文件有两种方式，一种是在我们src下面创建一个文件夹，assets专门来放这些，通过import引入

可以看到用这种方式引入，页面编译报错了，找不到这些字体文件，因为我就单纯引入了一个bootstrap.css也用不到这些字体文件，这里就要说到import的规则了，import导入是严格导入，他会去找你这个文件所有的依赖都要准备完毕才会给你编译成功，所以这里我们还有第二个方法，在public下面创建一个css文件夹，然后通过index.html我们link方式来导入，link就不会给你检查这么多了，这里也要尊重他的一个语法规则，前面要添加上一些参数

依照前面的思想，静态页面创建完毕，组件划分好后，第二步应该开始创建动态数据了，在这个案例，input输入的值是我们的数据，list每一个展示出来的用户信息是我们的数据，先把input的值搞好，用v-model绑定数据

当我们点击就去发送请求，通过关键字回来的参数再通过全局事件总线将数据发给我们的list

我们只要这三个数据，头像地址，用户github网址，用户名字

收到数据通过v-for渲染到页面

我们整个案例list界面其实要分为四个界面才完善，搜索出来的用户列表只是其中一个，还有刚开始进来的欢迎界面，点击搜索的loading界面，以及失败后的错误界面，很明显这里要用条件渲染，写上四个界面

主要是他们的条件是什么？结合前面的案例，一般条件渲染要控制几个页面的显示隐藏，至少都得有一个开关也就是变量，来判断他该显示还是隐藏，那么这里应该有四个开关，来表示四种不同的界面，首先welcome这个界面简单，一上来就为true，当我们点击搜索就将loading改为true，直到获取到请求，将它改为false，将用户列表的页面改为true也可以，但为了保险起见最好改为userInfo的长度，要有长度才是真正的得到数据了，错误信息这里一直都是false，知道进入错误的回调才为true

由于我们要一点击就将wel改为false，将loading改为true，所以需要将数据传到search这个界面，一旦点击就会触发这个自定义时间，会发送过来一个对象数据

list接受这边，为了能够直接赋值最好也将刚才定义的数据都装到一个对象里面去，接收到search传过来的对象就可以直接赋值，这样的好处不仅是方便，而且传过来的数据也语义化一点，不然就只能是传过来true，false等，我这边让每一个值等于这些值

一直到我们获取到数据，又传过来一个新的对象，重新赋值新的对象

这里有一个小注意点：因为我们的wel界面是一刷新就有，后面不可能再出现了，所以后面传过来的数据都不带wel这个参数的，你又以对象赋的值，所以只会导致一种情况

结构被改了，这里可以用到，es6的扩展运算符，主要是把这个要用起来，用处还是蛮多的

是比较老的一个ajax请求库，除了xhr、jq、axios、fetch后有多出了一个，它是vue的一个 插件库，所以说要在入口文件导入并注册

前面也说过，只要插件一注册，那么下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一样，就连返回值都一样，也是promise风格

可以让父组件向子组件指定位置插入html结构

要完成这样一个界面，是不是得把其中一个拿来作为组件后面的直接复用即可

这里传值有一个注意点，因为我们每个组件标签都是一个组件收到的数据也是不一样的，所以可以取一样的名字，到时候遍历出来各是各的

props接收数据，渲染即可

现在更新需求，我们有两个广告商美食这边只放他的图片，电影这边只放他的电影

这个时候就要用到插槽了，以前从没有在组件标签里面写过标签体吧，插槽就是要在这里面写

先不要管其他的，如果在组建标签里面写了标签体，还需要一个关键步骤，因为vue能够解析你的标签，但是他不知道放在哪里，也就是放在list这个组件的哪里，所以需要我们在组件模板里面用一个标签 slot来占位

这就是我们的slot插槽，但是由于组件里面的内容改动，后面也不能直接传数据进去了，也要把对应的位置内容提到组件标签这里来写

注意当我们slot部分没有内容传进来的时候，slot标签里面的内容就是默认值

就是具有名字的插槽，我们上面是一个插槽，可能不需要名字，但是如果有多个插槽，要插往不同的地方呢

首先给slot添加name属性

然后在我们标签体这边，谁要往哪个插槽添加信息，就把他的 slot属性写为谁

注意

当我想把一大段代码加入到一个slot插槽，但是我又不能一个一个去写，就有点耗时间了，可以将他们都包在一个div里面然后给div洗衣歌slot，但是这样就影响页面布局了，我们也可以写一个template标签包在这里面就不会影响布局了

如果用到了template，那么vue2.6很新的的一个更新，template可以这样来写slot名字，键值对，而且没有引号

这个写法只能应用于template标签

什么时候要用到这个作用域插槽

数据在组件的自身，但根据数据生成的数据结构需要组建的使用者来决定

就是数据没有在我们的插槽的使用者这里，什么叫做插槽的使用者，就是我们slot不是等着标签来填充吗，谁来填充这个插槽谁就是使用者，就比如说上面这个案例，这个template就是插槽的使用者

我把数据转移到list里面去，那么app里面定义的这些games，这些list标签也就是插槽的使用者都用不到数据了，数据转移到list里面去了，现在的情况就很像作用域发生了变化，list这个作用域里面可以使用games，但是插槽使用者在app里面就用不到，这个时候就要用到作用域插槽了

怎么来用，首先要知道一句话，插槽的动态绑定，是把这个数据送到他的使用者，注意是使用者，并不是平时这样是送到下级

我们使用者这边怎么来接受这个参数呢？必须使用template标签，并且里面写一个属性scope没有d，他的值随便取，就是一个对象，这里面包含了slot传过来的所有数据，如果就传过来了一个data那就是值.data就可以取到

文章来自https://www.cnblogs.com/heymar/p/16251560.html

JQuery ajax jsonp 跨域理解

//简写形式

$.getJSON(\”http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?\”,

function(data){

$(\”#showcontent\”).text(\”Result:\”+data.result)

});

*/

$.ajax({

type : \”get\”,

async:false,

url : \”http://app.example.com/base/json.do?sid=1494&busiId=101\”,

dataType : \”jsonp\”,//数据类型为jsonp

jsonp: \”jsonpCallback\”,//服务端用于接收callback调用的function名的参数

success : function(data){

$(\”#showcontent\”).text(\”Result:\”+data.result)

},

error:function(){

alert(\’fail\’);

}

});

JSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。

现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

而所有非同源的请求（即 域名，协议，端口 其中一种或多种不相同），都会被作为跨域请求，浏览器会将其非同源的响应数据丢弃。

这里可以理解为是浏览器在搞事情，服务端确确实实有返回数据，浏览器接收到返回的数据，发现我们请求的是一个非同源的数据，浏览器再将其响应报文丢弃掉。

而通过一些标签发出的请求则不会被进行同源检查，比如script标签，img标签等等，本文讲述JSONP便是通过script标签做的请求。

例如：1、声明一个全局变量

window.myCallback = (res)=>{ //声明一个全局函数 \’callback\’，用于接收响应数据 console.log(res) }

2、发出请求

<script>

window.myCallback = (res)=>{//这里为上一步定义的全局函数

console.log(res)

}

</script>

<script url=\”xxx?callback=myCallback\”>

//script标签的请求必须在写在定义全局函数之后

//这里需将全局函数的函数名作为参数callback的value传递

//这里callback这个键名是前后端约定好的

</script>

原文链接：https://blog.csdn.net/weixin_44411976/java/article/details/100035936

3、服务端返回数据格式

myCallback({ //一个函数的调用，将数据作为参数传递进去，再将整个函数的调用返回给客户端 name:\’ahreal\’, age:18 })

4、客户端接收到服务端的相应，相当于：

<script>

window.myCallback = (res)=>{//这里为上一步定义的全局函数

console.log(res)

}

</script>

<script>//将接收到的数据作为script标签里面的内容展开执行

myCallback({

name:\’ahreal\’,

age:18

})

</script>

参数

jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 \”callback=?\” 这种 GET 或 POST 请求中 URL 参数里的 \”callback\” 部分，比如 {jsonp:\’onJsonPLoad\’} 会导致将 \”onJsonPLoad=?\” 传给服务器。

jsonpCallback

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

如果不设置 jquery会自动调用seccess函数

深入浅出让你理解跨域与SSO单点登录原理与技术

一：SSO体系结构

SSO

​ SSO英文全称Single Sign On，单点登录。SSO是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。它是目前比较流行的企业业务整合的解决方案之一。

体系结构

​ 当用户第一次访问应用系统1的时候，因为还没有登录，会被引导到认证系统中进行登录；根据用户提供的登录信息，认证系统进行身份校验，如果通过校验，应该返回给用户一个认证的凭据－－token；用户再访问别的应用的时候就会将这个token带上，作为自己认证的凭据，应用系统接受到请求之后会把token送到认证系统进行校验，检查token的合法性。如果通过校验，用户就可以在不用再次登录的情况下访问应用系统2和应用系统3了 。

Token（令牌）

token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。

当用户第一次登录后，服务器生成一个token并将此token返回给客户端，客户端收到token后把它存储起来，可以放在cookie或者Local Storage（本地存储）里。 以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。

简单token的组成；uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串。为防止token泄露）。

设计token的值可以有以下方式

1. 用设备mac地址作为token
2. 用sessionid作为token

同域SSO原理分析

实际上，HTTP协议是无状态的，单个系统的会话由服务端Session进行维持，Session保持会话的原理是通过Cookie把sessionId写入浏览器，每次访问都会自动携带全部Cookie，在服务端读取其中的sessionId进行验证实现会话保持。同域下单点登录其实就是手写token代替sessionId进行会话认证。

token的生成

服务端生成token后，将token与user对象存储在Map结构中，token为Key，user对象为value，response.addCookie()生成新的Cookie，名为token，值为token的值。

token过期移除

将服务端的token从Map中移除，再删除浏览器端的名为token的Cookie。

认证流程

跨域SSO原理分析

当有多个系统时，认证机制的流程如下：

1. 提供用户登录界面，供用户进行身份认证
2. 用户验证通过后，生成新token
3. 将token<->user 对存入全局MAP中供校验
4. 将token写入所有域的Cookie中
5. 页面重定向回原始请求URL

分析

当系统有多个并且在不同域(domain)时，Cookie只会作用在当前域下。

将token写入所有域的Cookie中才是解决跨域SSO的核心。

二：Cookie增删改查

如何读取Cookie？

通过Servlet中的request对象可以读取到Cookie数组，然后foreach遍历读取，一般只是获取到nam和value，其他信息写入到浏览器后，浏览器不主动再发回来，读取并无意义。

如何写入Cookie带浏览器？

新建Cookie对象设置一系列属性，然后添加到response中去。需要注意的是，当设置path为“/”时，表示所有路径都会被该Cookie作用到，如果设置为/path1那么由/path2发起请求就不会携带该Cookie。默认不设置只作用在当前路径下。

修改Cookie

修改更新Cookie时，除了要保证Cookie的name是相同的，也要保证Cookie的一系列属性是相同的，否则浏览器会生成新的Cookie。

删除Cookie

只需要设置Cookie的MaxAge为负值，意味着是过去的Cookie，浏览器就会清除。

三：跨域读写Cookie

1.利用HTML的script标签跨域写Cookie

比如当前域是www.a.com,下面的script标签是跨域写cookie的核心，通过此标签实现了向www.b.com域写入cookie：

P3P协议

​ P3P是一种被称为个人隐私安全平台项目（the Platform for Privacy Preferences）的标准，能够保护在线隐私权，使Internet冲浪者可以选择在浏览网页时，是否被第三方收集并利用自己的个人信息。如果一个站点不遵守P3P标准的话，那么有关它的Cookies将被自动拒绝，并且P3P还能够自动识破多种Cookies的嵌入方式。p3p是由全球资讯联盟网所开发的。

举个例子：

​ 我们在访问A网站时，理论上说，我们只能把Cookie信息保存到A站域名下，而不能写入到B网站下。如果想要跨域读写Cookie，只是通过script标签变相访问B网站在一些浏览器是行不通的，此时B网站的服务器应该告诉浏览器允许A网站写入Cookie，否则浏览器将会拒绝执行，这就是P3P协议。

服务端如何告诉浏览器？

​ P3P提供了一种简单的方式 ，来加载用户隐私策略，只要在http响应的头信息中增加 response.setHeader(\”P3P\”,\”CP=NON DSP COR CURa ADMa DEVa TAIa PSAa PSDa IVAa IVDa CONa HISa TELa OTPa OUR UNRa IND UNI COM NAV INT DEM CNT PRE LOC);而无需指定隐私策略文件也可以达到指定隐私策略的目的。 CP=后面的字符串分别代表不同的策略信息。

总结

因为P3P协议所以不能保证所有浏览器都能通过script标签方式跨域写Cookie，有的浏览器本身就是拒绝跨域的。

显然这种方式是不能保证跨域写cookie的成功性。

2.通过URL参数实现跨域信息传递

我们要在A域实现写入token到B域，需要在A域设计一个servlet接收请求，代码：

由a域发起请求，请求地址：http://www.a.com/tg?from=http://www.b.com/set_cookie, 请求后该Servlet会获取from参数的值并生成token最后让客户端重定向到http://www.b.com/set_cookie?cname=token&cval=123456，然后B域的Servlet(\”set_cookie\”)获取Url参数写入Cookie到客户端，代码：

这时候再查看B域下的Cookie就可以发现(token=123456)已经被写入到浏览器。

3.读取其它域的Cookie

利用script标签

利用script标签执行另一个域实现的读取cookie方法，script标签返回结果将是变量定义形式的JS代码，每一个变量表示一个cookie项，这些代码加载后，此页面后续JS代码可以直接在script脚本中读取已定义的变量值，即各cookie值。

HTML页面读取

B域的url为/read_cookies的Servlet是如何实现的？

如图，首先我们先在request中获取cookie数组，然后for循环遍历拼接为类似var token=\’test123\’;的字符串。最重要的是设置ContentType为application/javascript，代码如下：

四：跨域Ajax请求

1.Jsonp的方式

跨域Ajax请求在浏览器阶段就会被阻止，我们可以通过script标签返回想要的json数据。如图：

后台Servlet代码

在Servlet中设置返回类型为javascript，并正常获取json格式的数据，最关键的是在最后拼接为js语句字符串，语句本身就是执行一个调用函数的操作：

而showResult(ret)回调函数自然需要我们在之前就定义好：

优化

这种方式，前端的回调函数和后端耦合度较高。前端可以在调用后端方法时带上回调函数名（?callback=xxxxx），后端优化后的代码：

再优化

HTML页面加载到我们定义的script标签时就会执行我们的回调方法，更多时候我们想要控制回调方法的执行时机。这个问题可以通过前端动态生成节点来解决，当我们执行完之后再移除节点即可：

JQuery

我们可以把这些封装到一个方法里，随时调用。这里可以使用Jquery封装好的API。

2.CORS简介

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

跨域资源共享（ CORS）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如 XMLHttpRequest或 Fetch）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

GET跨域请求原理

当客户端浏览器发起一个跨域的HTTP请求，浏览器经过请求响应，如果没有看到Access-Control-Allow-Origin的header头部，会认为你的请求是不合法的。换句话说，我们只要在被请求的服务器上设置这个头部，浏览器就会允许我们进行请求。

解决方法

对于简单的请求，我们直接在服务端 设置就可以了。如图，只要请求的地址是www.a.com就会被浏览器允许跨域。如果想要允许对于多个来源可以用,号进行隔开；如果想要允许所有来源，设置为*就可以，不过建议不要使用，这样会造成安全隐患。

对于复杂的请求，比如POST，或者加入了自定义header头部，上面的方法就不适用了。下面继续看。

CORS流程

请求发起时,浏览器先判断当前是否是跨域的AJAX;

如果是,判断是否是普通类型请求(GET类型,无自定义头数据);

普通请求,直接发起GET到服务端,在响应头中寻找 Access-Contro-Alow- Origin,如果有且允许,处理响应结果;

不是普通请求(非GET类型,或有自定义头), 先 PreFlight(即发起一个 method= OPTIONS)的请求,

要求返回 Access-Control-Allow- Methods和 Access-Control-Allow- Headers, 内容体为空

PreFlight正确执行后, 再发起GET请求, 获得响应结果, 并处理结果.

实现

归根到我们的代码中的实现，只需要在servlet中定义options请求的处理方法即可。如图

注意：Access-Control-Allow-Origin是必需的。

3.两种跨域AJax请求对比

兼容性

Jsonp对所有浏览器兼容，CORS对现代浏览器兼容（IE8之后）。

请求方式

Jsonp只支持GET方式，CORS支持GET，POST等。

调用方式

Jsonp需要服务端封装返回信息，CORS更像原生AJax一样使用。

作者：风平浪静如码链接：https://juejin.im/post/5e81e82551882573a1377a08

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com