laravel+vue项目前后端分离CSRF_TOKEN设置


laravel+vue项目前后端分离CSRF_TOKEN设置

    • 一般laravel项目的CSRF_TOKEN的设置都在blade.html中设置
    • laravel+vue前后端分离
      • 首先创建一个Middleware解决跨域问题
      • 设置一个取得CSRF_TOKEN的路由
      • 设置请求头部信息
    • 小结

为了更方便的管理项目，采用了前后端分离，分别独立管理。在进行数据交互的时候遇到了CSRF_TOKEN相关设置的问题。

一般laravel项目的CSRF_TOKEN的设置都在blade.html中设置

在blade.html中设置的方式很简单，添加以下代码即可：

1
{{csrf_field()}}

laravel+vue前后端分离

阿lin我的项目是前后端分离、独立的，不使用laravel的balde，所以在进行post的操作时需要验证CSRF_TOKEN。刚遇到这个问题时，在网上一搜索都是关于在blade前提下的设置，所以当我解决后，就打算赶紧分享给大家，嘻嘻嘻

首先创建一个Middleware解决跨域问题

在EnableCrossRequestMiddleware设置响应头部信息，源码如下：

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
29
30
namespace App\Http\Middleware;

use Closure;

class EnableCrossRequestMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = [
            'http://localhost:8080',
        ];
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN, X-Requested-With');
            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
        }
        return $response;
    }
}

设置一个取得CSRF_TOKEN的路由

在laravel的routes目录下的入口路由中设置，一般默认是web.php，具体还是根据自己项目来。代码如下：

1
2
3
Route::get('/token', function () {
        return csrf_token();
    });

设置请求头部信息

在vue的main.js中设置，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
import axios from 'axios'
Vue.prototype.$http = axios;
//配置请求的跟路径
axios.defaults.baseURL = 'http://lindom.blog.com/';
//跨域请求设置
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.get('/token').then(res => {
    axios.defaults.headers.common['X-CSRF-TOKEN'] = res.data;
    axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

小结

我这是前端先GET请求后端建立的CSRF_TOKEN，再添加至头部信息中进行验证。欢迎大家留言更好的方法~~