react 如何获取url协议

获取 URL 协议的方法

在 React 中，可以通过以下几种方式获取当前页面的 URL 协议（如 http: 或 https:）：

使用 window.location.protocol

通过浏览器的全局对象 window.location 直接获取协议部分：

const protocol = window.location.protocol; // 返回 "http:" 或 "https:"

使用 URL API

通过现代浏览器的 URL 构造函数解析当前页面的完整 URL：

const currentUrl = new URL(window.location.href);
const protocol = currentUrl.protocol; // 返回 "http:" 或 "https:"

在 React 组件中动态获取

在组件生命周期或 Hook 中调用上述方法：

import React, { useEffect, useState } from 'react';

function ProtocolDisplay() {
  const [protocol, setProtocol] = useState('');

  useEffect(() => {
    setProtocol(window.location.protocol);
  }, []);

  return <div>当前协议: {protocol}</div>;
}

注意事项

• 如果代码运行在服务器端（如 SSR），window 对象不存在，需通过环境变量或请求头判断协议。
• 协议值包含冒号（如 https:），使用时可能需要去除后缀。