source标签src属性请求怎么添加Authorization

img


如图所示,src属性发出去的请求,请求头中怎么添加Authorization?

不是你这么写的啊, 你得通过接口回去视频的播放地址, 然后把获取的视频地址给src, 这里不存在auth..的问题, 是否理解了呢?

通过添加src属性来指定视频文件的URL,在URL中添加Authorization头来发送身份验证凭据
参考代码:

const authToken = 'your_authorization_token';  
const videoURL = 'video.mp4';  
const baseURL = `http://example.com/${videoURL}?ticket=ticket_string`;  
const encodedToken = encodeURIComponent(authToken);  
  
const xhr = new XMLHttpRequest();  
xhr.open('GET', `${baseURL}&ticket=ticket_string`);  
xhr.setRequestHeader('Authorization', `Basic ${encodedToken}`);  
xhr.send();

public class AuthorityFilterAttibute : AuthorizeAttribute
    {
        CustomerBLL bll = new CustomerBLL();
        //public override  bool AllowMultiple { get; }

        public override void OnAuthorization(HttpActionContext actionContext)
        {
            // 1、客户请求的用户标识和凭据
            actionContext.Request.Headers.TryGetValues("user_flag", out var user_flag);
            actionContext.Request.Headers.TryGetValues("flag_key", out var flag_key);
            //调用方标志
            actionContext.Request.Headers.TryGetValues("server_flag", out var server_flag);
            //获取用户token
            actionContext.Request.Headers.TryGetValues("Authorization", out var Authorization);
            //LogHelper.WriteLog("user_flag :" + user_flag.FirstOrDefault() + "》flag_key" + flag_key.FirstOrDefault());

            if (user_flag == null || flag_key == null || !flag_key.Any() || !user_flag.Any())
            {
                HttpContext.Current.Response.StatusDescription = "当前请求没有访问权限";
                actionContext.Response = new HttpResponseMessage(System.Net.HttpStatusCode.NonAuthoritativeInformation);
                return;
            }

            string flag = user_flag.FirstOrDefault() + "_key";
            string YHSW_key = ConfigurationManager.AppSettings[flag];

            if (YHSW_key != flag_key.FirstOrDefault())
            {
                HttpContext.Current.Response.StatusDescription = "当前请求用户标识或密钥错误";
                actionContext.Response = new HttpResponseMessage(System.Net.HttpStatusCode.NonAuthoritativeInformation);
                return;
            }

         
        }

请求头给不了哟,只能在query string 添加哟

要在source标签的src属性请求中添加Authorization头,可以使用XMLHttpRequest对象进行请求,并通过setRequestHeader方法设置Authorization头。

下面是示例代码:

// 获取video元素
var video = document.getElementById('my-video');

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置Authorization头
var token = 'your_authorization_token';  // 填写你的Authorization头
xhr.setRequestHeader('Authorization', token);

// 发送请求
xhr.open('GET', 'your_video_url', true);
xhr.responseType = 'blob';  // 设置响应类型为二进制数据
xhr.onload = function(e) {
    if (this.status === 200) {
        var videoBlob = this.response;
        // 转换Blob为Object URL
        var videoObjectUrl = URL.createObjectURL(videoBlob);
        // 将Object URL赋给video元素
        video.src = videoObjectUrl;
    }
};
xhr.send();

其中,'your_video_url'替换为你的视频资源URL地址,'your_authorization_token'替换为你的Authorization头值。

注意,因为涉及到跨域请求,所以在进行请求时需要设置Access-Control-Allow-Headers头,以允许跨域请求时携带自定义的Authorization头。在服务端设置时,可以在服务器响应头中添加以下内容:

Access-Control-Allow-Headers: Authorization

具体实现方式需要根据你的服务端语言或框架来确定。

在请求头中添加 Authorization 头信息,可以参考下面的示例:

methods: {
  fetchData() {
    axios.get('your_api_url', {
      headers: {
        Authorization: `Bearer ${YOUR_AUTH_TOKEN}`,
      }
    })
    .then(response => {
      // 处理响应数据
    })
    .catch(error => {
      // 处理错误
    });
  }
}

其中, get() 方法用于发送 GET 请求,Authorization 头信息为 Bearer YOUR_AUTH_TOKEN

用axios或者自定义请求头