ThinkPhp项目解决静态资源请求的跨域问题的解决思路
背景:我在前端使用vue语言开发的,请求的后端是用ThinkPhp项目开发的。我vue项目里的请求php接口,自带header参数的跨域问题通过网上查询到的server端配置方法已经解决了。我使用的
是中间件的配置方法:
<?php
//admin 项目 配置中间件
use app\admin\middleware\MyCrossDomain;
return [
MyCrossDomain::class
];
MyCrossDomain.php
<?php
namespace app\admin\middleware;
use Closure;
use think\Config;
use think\Request;
use think\Response;
/**
* 跨域请求支持
*/
class MyCrossDomain
{
protected $cookieDomain;
protected $header = [
'Access-Control-Allow-Credentials' => 'true',
'Access-Control-Max-Age' => 1800,
'Access-Control-Allow-Methods' => 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'Authorization, Code,Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',
];
public function __construct(Config $config)
{
$this->cookieDomain = $config->get('cookie.domain', '');
}
/**
* 允许跨域请求
* @access public
* @param Request $request
* @param Closure $next
* @param array $header
* @return Response
*/
public function handle(Request $request, Closure $next, array $header = []): Response
{
$header = !empty($header) ? array_merge($this->header, $header) : $this->header;
if (!isset($header['Access-Control-Allow-Origin'])) {
$origin = $request->header('origin');
if ($origin && ('' == $this->cookieDomain || str_contains($origin, $this->cookieDomain))) {
$header['Access-Control-Allow-Origin'] = $origin;
} else {
$header['Access-Control-Allow-Origin'] = '*';
}
}
return $next($request)->header($header);
}
}
这样之后前端项目通过axios接口请求不再报跨域的错了,这一阶段的问题已经解决。
现在有一个新的问题,我在Thinkphp项目里有一个静态的json文件,H5要通过<link>的方式要请求它。类似这样的:
document.write("<link rel='manifest' href='https://landpage-server.appboost.co/admin/file/xxxxx/xxxx.json');
虽然我的ThinkPhp项目已经配置了跨域的,但是对于请求这个静态文件还是报跨域的问题。折腾了好久,各种配置还是不行。最后我尝试了一种办法,就是专门写一个Controller来响应静态文件的返回。代码如下:
StaticResourceController.php
<?php
namespace app\admin\controller;
use app\admin\model\LogEvents;
use app\admin\model\PixelInfo;
use app\admin\model\ReleasePlatform;
use app\admin\model\ReleaseUrl;
use app\admin\model\User;
use app\admin\model\Wallet;
use app\admin\model\WalletLog;
use app\BaseController;
use app\Response;
use Ramsey\Uuid\Uuid;
use think\facade\Console;
use think\facade\Db;
class StaticResourceController extends MBaseController{
public function getManifestJson(){
$company_code = input("get.code");
$promote_code = input("get.id");
// echo root_path();
$root = root_path();
$dir = $root ."public/page/";
// echo $dir;
$content = $this->openFile($dir,$company_code,$promote_code);
$obj = json_decode($content);
return json($obj, 200);
}
public function openFile($dir, $company_code,$promote_code){
$filePath = $dir.$company_code."/".$promote_code.".json"; // 文件路径
$mode = 'r'; // 打开模式
$fileHandle = fopen($filePath, $mode);
$content = fread($fileHandle, filesize($filePath));
if ($fileHandle === false) {
die('无法打开文件');
}
fclose($fileHandle);
return $content;
}
}
H5端请求是这样的:
document.write("<link rel='manifest' href='https://landpage-server.appboost.co/admin/staticResource/getManifestJson?
code="+$company_code+"&id="+$promote_code+"'>");
谢天谢地,终于不报跨域的问题了,成功拿到了json静态文件。
原文地址:https://blog.csdn.net/nnmmbb/article/details/145227747
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!