基于Lumen-CORS跨域

如果是客户端是浏览器,则在调用 API 的时候,基本上无法避免跨域问题。
不过处理也很简单,需要浏览器和服务器同时配合:浏览器在发起 OPTIONS preflight 请求的时候,服务器返回认可的一些信息就行了。

什么是跨域 ?

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:

  • DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
  • XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

为什么要有跨域限制

了解完跨域之后,想必大家都会有这么一个思考,为什么要有跨域的限制,浏览器这么做是出于何种原因呢。其实仔细想一想就会明白,跨域限制主要是为了安全考虑

  • AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:
  1. 用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识。
  2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
  3. evil.comhttp://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。
  4. 银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。
  5. 而且由于Ajax在后台执行,用户无法感知这一过程。
  • DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:
  1. 做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com
  2. iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。
  3. 这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.comdom节点,就可以拿到用户的输入了,那么就完成了一次攻击。

所以说有了跨域跨域限制之后,我们才能更安全的上网了。

如何解决跨域 ?

跨域资源共享 - CORS

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing

具体详见下面的代码封装~~~

Jsonp实现跨域

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。

这么说比较模糊,我们来看个例子:

1
2
3
4
5
6
7
8
9
10
// 定义一个fun函数
function fun(fata) {
console.log(data);
};
// 创建一个脚本,并且告诉后端回调函数名叫fun
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=fun';
body.appendChild(script);

返回的js脚本,直接会执行。所以就执行了事先定义好的fun函数了,并且把数据传入了进来。

1
fun({"name": "name"})

当然,这个只是一个原理演示,实际情况下,我们需要动态创建这个fun函数,并且在数据返回的时候销毁它

因为在实际使用的时候,我们用的各种ajax库,基本都包含了jsonp的封装,不过我们还是要知道一下原理,不然就不知道为什么jsonp不能发post请求了~

服务器代理

浏览器有跨域限制,但是服务器不存在跨域问题,所以可以由服务器请求所要域的资源再返回给客户端。

服务器代理是万能的。

document.domain来跨子域

location.hash跨域

使用postMessage实现页面之间通信

基于Lumen封装CORS

具体如下:

  • app/Http/Middleware/CORS.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php

namespace App\Http\Middleware;

use Closure;

class CORS
{
public function __construct()
{
}

public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => '*',
'Access-Control-Allow-Headers' => 'Access-Control-Allow-Origin, AUTHORIZATION',
'Access-Control-Max-Age' => 86400,
];

if ('OPTIONS' == $request->getMethod()) {
return response(null, 200, $headers);
}

return $next($request)->withHeaders($headers);
}
}
  • bootstrap/app.php
1
2
3
4
// 指定全局中间件
$app->middleware([
'cors' => App\Http\Middleware\CORS::class,
]);
  • jQuery Ajax Demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
url: 'http://api.example.com/path/to/resource',
type: 'GET',
dataType: 'json',
async: false,
cors: true ,
headers: {
'Access-Control-Allow-Origin': '*',
'AUTHORIZATION': 'JWT_STRING'
},
success: function (res) {
},
error: function (xhr, status) {
}
});

Powered by Hexo and Hexo-theme-hiker

Copyright © 2017 - 2022 Keep It Simple And Stupid All Rights Reserved.

访客数 : | 访问量 :