最近刚接触laravel框架,首先要写一个跨域的单点登录。被跨域的问题卡了两三天,主要是因为对跨域这快不了解,就在刚才有点茅塞顿开的感觉,我做一下大概整理,主要给一些刚接触摸不着头脑的看,哪里写得不对的,也请大神指点,言归正传:

1.先用通俗易懂的话说下原理和几种跨域的方式,因为网上一搜都是追对某一种方式的专业性解答,我是消化不了多少。

第一种:jsonp 方式,这是什么方式呢,先要说一说JavaScript,在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略),也就是说JS只能访问当前项目的页面。AJAX是基于XMLHttpRequest(这个请自行百度了解)实现的,所以AJAX 一类的请求肯定也是不能跨域请求的。 然后jsonp方式呢,虽然一般是再$.ajax 方法里面设置dataType: 'jsonp',但是发送请求出去的时候,已经跟ajax 没多少关系了,不管你设置type : get 还是 post ,它都是通过get发送请求的,可以说这个已经属于 jsonp 协议了,这是个非官方协议。发一下代码:

$.ajax({
url: 'http://lrz.laravel.com/auth/login',
type: 'get',
dataType: "jsonp",
jsonp: "callback",
data: {user_id:user_id,name:name},
success: function (data) {
console.log(data);
},
error:function()
{
alert("error");
}
})

当设置dataType 为 jsonp的时候就是jsonp请求了,然后 下面的 jsonp: "callback", 什么意思呢,jsonp方式会在客户端注册一个 js 的 callback方法,并通过GET方式发送到服务器,见连接:

  1. Request URL:
    http://lrz.laravel.com/auth/login?callback=jQuery21307739646233126818_1491549029207&user_id=1&name=%E5%90%95%E7%91%9E%E6%94%BF&_=1491549029208

jQuery21307739646233126818_1491549029207 这个方法就是客户端注册的。

然后服务器端怎么处理呢,接收 callback 的值,并返回一个JS方法的方式告知客户端,就是  return jQuery21307739646233126818_1491549029207(json_encode([1,2])); 这样的方式,客户端才能通过success: function (data) {} 获取到返回的值了,这就是通过JS注入的方式实现的 跨域请求,顺便我发一下 laravel 的返回方式:

$callback = $request->input('callback');

$arr = array('status'=>'200');
$user_id = $request->input('user_id');
$name = $request->input('name');
return response($callback.'('.json_encode($arr).')')->withCookie(Cookie::forever('name', $name))->withCookie(Cookie::forever('user_id',$user_id));

这么写是为了生成服务器端的cookie,用不着的小伙伴就忽略。

第二种方式就是通过html5 WebSocket标准 W3C方式,这个我一开始跟JSONP 弄混了,这个跟jsonp 又没关系了,这种方式通过设置一下头部信息就能实现跨域了,

Access-Control-Allow-Origin : 指明哪些请求源被允许访问资源,值可以为 "*","null",或者单个源地址。

服务器端主要设置这个值就能让其他的网址访问他了,用AJAX就能拿到服务器的数据了,我突然感觉这个方式好简单.. 已经能满足我的需求了,比jsonp 方式还安全。关于laravel的开启跨域方式可以看这篇文章: http://www.tuicool.com/articles/3yEFVz2,我就不多说了。

第一次写总结,哈哈,就写这么多了。

关于laravel框架的跨域请求/jsonp请求的理解的更多相关文章

  1. Springboot跨域 ajax jsonp请求

    SpringBoot配置: <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  2. Django框架 之 跨域请求伪造

    Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...

  3. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

  4. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  5. SSM框架处理跨域问题

    什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个 ...

  6. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  7. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  8. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  9. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

随机推荐

  1. java split函数应该注意的问题

    split函数的参数是一个String,但是这个String会被解释成一个正则表达式. 比如 "test.txt".split(".").length得到的值是 ...

  2. 3D Touch开发全面教程之Peek and Pop - 预览和弹出

    ## 3D Touch开发全面教程之Peek and Pop - 预览和弹出 --- ### 了解3D Touch 在iPhone 6s和iPhone 6s Plus中Apple引入了3D Touch ...

  3. 项目中通过Sorlj获取索引库中的数据

    在开发项目中通过使用Solr所提供的Solrj(java客户端)获取索引库中的数据,这才是真正对项目起实质性作用的功能,提升平台的检索性能及检索结果的精确性 第一步,引入相关依赖的jar包 第二步,根 ...

  4. dubbo源码分析(一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. Flex 布局教程

    今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...

  6. Swift应用案例 1.无限轮播

      从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播.广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们 ...

  7. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  8. Jsp,Servlet初学总结

    一.Jsp 1. 指令: <%@page language="java" import="java.*" contextType="text/h ...

  9. wemall app商城源码Android 获取XML网络数据并绑定到ListView

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享Android 获取XML网络数据并绑定到Li ...

  10. 初次接触java中的递归算法

    一道关于兔子繁衍的编程题: 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 自己考虑了挺久,思路出现了问题,甚至连 ...