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
微信扫一扫 
支付宝扫一扫 
Comments(1)
[…] […]