1.解决跨站问题
- sonp的实现步骤
视图 h5
Api
效果图
代码
- .Api
- userController.php 控制器**
//登录接口
public function login(Request $request)
{
//接收传过来的get请求的数据
$call=$request->get('callback');
$arr=[
'status'=>200,
'msg'=>'',
'data'=>[]
];
echo $call.'('.json_encode($arr).')';
exit;
}
- H5
- Login.blade.php 视图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>H5 login</title>
<style>
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title">
H5 Login
</div>
<table>
<tr>
<td>用户名</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2"><button onclick="login()">jsonp登录</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="login2()">登录</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
var url='http://api.ldyphp.top/login';
function login()
{
$.ajax({
url:url,
data:{
user_name:"zhangsan"
},
type:'post',
dataType:'jsonp',
jsonpCallback:'loginCallBack',
success:function(json_info){
// alert(json_info.msg);
console.log(json_info.msg);
alert(JSON.stringify(json));
}
})
}
//loginCallBack({"status":200,"msg":"","data":[]})
// function loginCallBack(json){
// alert(JSON.stringify(json));
// }
</script>
- 服务端可以指定 特定的域名可以请求
- 格式
// 允许a.com发起的跨域请求
//header("Access-Control-Allow-Origin:http://a.com");
//如果需要设置允许所有域名发起的跨域请求,可以使用通配符 *
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');
- 视图
- Api
*号代表所有的都不验证csrf
- H5
效果图
- 代码
- Api
- userController.php 控制器
public function login2(Request $request)
{
$arr=[
'status'=>200,
'msg'=>'',
'data'=>[]
];
return $arr;
}
- Index.php
/ 允许a.com发起的跨域请求
//header("Access-Control-Allow-Origin:http://a.com");
//如果需要设置允许所有域名发起的跨域请求,可以使用通配符 *
header("Access-Control-Allow-Origin:http://h5.ldyphp.top");
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');
- VerifyCsrfToken.php
protected $except = [
//
'*'
];
- H5
- Login.blade.php 视图
function login2()
{
var url='http://api.ldyphp.top/login2';
$.ajax({
url:url,
data:{
user_name:"zhangsan"
},
type:'post',
success:function(json_info){
console.log(json_info.msg);
alert(JSON.stringify(json));
}
})
}
补充:
CORS 定义
Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
php后台响应头部代码
//json头
header("Content-type: application/json");
//跨域
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: 跨域URL");
//CORS
header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
js请求代码
$.ajax({
type: "POST",
url: "",
xhrFields: {withCredentials: true},
crossDomain: true,
data: "",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("test-token", 'abcd');
XMLHttpRequest.setRequestHeader("test-sessid", 'abcd');
},
error: function (XMLHttpRequest) {
if (XMLHttpRequest.status === 401) { }
},
success: function () {},
complete: function () {}
});