我记得我的项目之前已经解决了跨域问题。
后来在功能开发着,需要添加一个自定义的header,发现又出现跨域报错。
于是又开始一通摸索折腾。
我的项目前面端是用axios网络请求,通过拦截器添加header,代码如下:
//添加请求拦截器
instance.interceptors.request.use(config => {
const ss = useTokenStore();
const cc = useCompanyCodeStore();
if(ss.token){
//pinia中定义的ref数据不需要.value
config.headers['Authorization'] = ss.token;
} else{
console.info("登录接口,不需要token")
}
if(cc.company_code){
config.headers['Code'] = cc.company_code;
}
return config;
}, error => {
return Promise.reject(error);
});
一直报跨域问题!!!!!
我后端用的ThinkPhp,网上搜索了各种解决跨域的配置,折腾了好久。最后这样解决了:
1.在自己的项目里创建一个中间件文件MyCrossDomain.php
2.创建一个中间件配置文件,只要配置了中间件,Thinkphp5.1以上的版本中Controller里不用显示调用,系统默认会使用它。
我的目录结构是这样的:
MyCrossDomain.php文件 在这里我添加了自己需要的header: “Code"
<?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);
}
}
middleware.php文件
<?php
//admin 项目 配置中间件
use app\admin\middleware\MyCrossDomain;
return [
MyCrossDomain::class
];
在经历了无数次失败后,终于看到了200返回响应。并且在header中看到了自己添加的Code
至此困扰我两天的添加自定义header引起的跨域问题得以解决。