TP运行跨域的方法很多,特别是TP6,就更是简单了,这里分享三种VUE和Thinkphp6做前后端分离时,跨域请求的设置方法。
一、路由允许跨域请求
其实这种方法相对要好得多,除非你的后端是完全的restful对外方服务,否则建议采用第一种方式,即路由中允许跨域请求。
允许所有
1 2 |
Route::get('new/:id', 'News/read') ->allowCrossDomain(); |
单条路由中,如上加上allowCrossDomain即可允许跨域请求,如果是分组的路由,也是类似的操作:
1 2 3 4 5 |
Route::group('web', function() { Route::get('/', 'WebApi/index'); Route::get('/login', 'WebApi/login'); Route::post('/login', 'WebApi/login'); })->allowCrossDomain(); |
部分允许
如果想要现在部分域名访问,则这样操作:
1 2 3 4 5 |
Route::get('/', 'WebApi/index') ->allowCrossDomain([ 'Access-Control-Allow-Origin' => 'lanluo.cn', 'Access-Control-Allow-Credentials' => 'true' ]); |
这是允许一个,允许多个则需要以数组形式传入或直接填写在此处。
1 2 3 4 5 |
Route::get('/', 'WebApi/index') ->allowCrossDomain([ 'Access-Control-Allow-Origin' => '["lanluo.cn","api.lanluo.cn"]', 'Access-Control-Allow-Credentials' => 'true' ]); |
二、路由中间件
和上面的方法类似,这里以路由分组为例:
1 2 3 4 5 |
Route::group('web', function() { Route::get('/', 'WebApi/index'); Route::get('/login', 'WebApi/login'); Route::post('/login', 'WebApi/login'); })->middleware(\think\middleware\AllowCrossDomain::class); |
在最后加上这个内置的中间件即可实现跨域请求的允许。
控制器中调用中间件也是可以的,如下:
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 |
<?php declare (strict_types = 1); namespace app\controller; use think\Request; use think\middleware\AllowCrossDomain; class WebApi { protected $middleware = [AllowCrossDomain::class]; public function index(){ return 'The Site is building'; } public function login(){ $back = [ 'data' => Null, 'meta'=>[ 'status' => 200, 'msg' => 'jok_data' ] ]; return json($back); } } |
再根据自己的需求,构建对应的逻辑代码。
三、全局中间件
不得不说TP6确实有可取之处,我们只需要在全局中间件中开启即可。
原始的全局中间件进行了注释,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php // 全局中间件定义文件 return [ // 全局请求缓存 // \think\middleware\CheckRequestCache::class, // 多语言加载 // \think\middleware\LoadLangPack::class, // Session初始化 \think\middleware\SessionInit::class, // Auth中间件 // \app\middleware\Auth::class, // 跨域中间件 // \think\middleware\AllowCrossDomain::class ]; |
我们将跨域中间件的注释取消,并且保存,即可实现跨域请求。
如果没有也不用担心,只要确定是TP6,就内置了该中间件,复制代码粘贴上去也是可以的,如下是启用该中间件后的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php // 全局中间件定义文件 return [ // 全局请求缓存 // \think\middleware\CheckRequestCache::class, // 多语言加载 // \think\middleware\LoadLangPack::class, // Session初始化 \think\middleware\SessionInit::class, // Auth中间件 // \app\middleware\Auth::class, // 跨域中间件 \think\middleware\AllowCrossDomain::class ]; |
OK,以上就是TP和VUE写前后端分离时,VUE提示TP不能跨域请求的三种设置方法,希望能有所帮助。
原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/10968
评论列表(1条)
[…] […]