当前位置: 首页 > article >正文

网络请求自定义header导致跨域问题

我记得我的项目之前已经解决了跨域问题。

后来在功能开发着,需要添加一个自定义的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引起的跨域问题得以解决。


http://www.kler.cn/a/370874.html

相关文章:

  • eBay账号安全攻略:巧妙应对风险
  • OpenGL中Shader LOD失效
  • http转化为https生成自签名证书
  • SQL Prompt 插件
  • c#删除文件和目录到回收站
  • ubuntu下安装编译cmake,grpc与protobuf
  • 「二叉树进阶题解:构建、遍历与结构转化全解析」
  • 【网络安全】红队人员的GPO和OU指南
  • 端口号和ip地址一样吗?区别是什么
  • [Linux] linux 软硬链接与动静态库
  • 芯片上音频相关的验证
  • 2024前端JS面试题总汇
  • 基于yolov8的布匹缺陷检测系统,支持图像、视频和摄像实时检测【pytorch框架、python源码】
  • Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置
  • 《Linux系统编程篇》fork函数——基础篇
  • 基于SSM+小程序的童装商城管理系统(商城3)
  • 用Pyhon写一款简单的益智类小游戏——2048
  • 【338】基于springboot的IT职业生涯规划系统
  • Elasticsearch Serverless 高性价比智能日志分析关键技术解读
  • 数据库基础介绍
  • 构建最新的LLaMA-Factory镜像
  • HTML的常用标签
  • 使用virtualenv导入ssl模块找不到指定的模块
  • 单例模式 c++
  • stm32入门教程--DMA 超详细!!!
  • Linux Unix 共享库