Next JS应用本地可唤起位置权限请求，部署至Vercel等平台后失效

问题根因 #

浏览器地理定位API的安全规则限制：仅localhost本地调试环境允许HTTP协议调用定位接口，所有线上生产环境必须使用HTTPS协议访问站点，否则浏览器会直接静默禁用navigator.geolocation接口，不会弹出权限申请提示。另外Next.js的服务端渲染特性也可能导致定位代码在没有浏览器环境的服务端执行失败，无法触发后续的客户端逻辑。

修复步骤 #

• 第一步：确保站点全链路启用HTTPS
  Vercel、Heroku、Digital Ocean等平台默认都会为平台分配的测试域名以及绑定的自定义域名提供免费SSL证书，直接使用HTTPS前缀的链接访问站点即可，不要使用HTTP协议的链接打开。如果是自行配置服务器，需申请SSL证书并配置Web服务开启HTTPS访问。
• 第二步：修正Next.js中定位代码的执行时机
  原代码直接全局调用geoLocation()，如果页面开启了SSR/SSG，这段代码会先在服务端执行，服务端不存在navigator浏览器对象会导致逻辑中断，后续客户端也不会正常触发权限申请。需要将定位调用包裹在仅客户端执行的useEffect钩子中，修正后的代码示例如下：

import { useState, useEffect } from 'react';

export default function GeoPage() {
  const [status, setStatus] = useState(null);
  const [lat, setLat] = useState(null);
  const [lng, setLng] = useState(null);

  const geoLocation = () => {
    if (!navigator.geolocation) {
      setStatus('Geolocation is not supported by your browser');
    } else {
      setStatus('Locating...');
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setStatus(null);
          setLat(position.coords.latitude);
          setLng(position.coords.longitude);
        },
        () => {
          setStatus('Unable to retrieve your location');
        }
      );
    }
  };

  // 仅在客户端组件挂载完成后执行定位逻辑
  useEffect(() => {
    geoLocation();
  }, []);

  // 其余页面渲染逻辑
  return <div>{status}</div>;
}

• 第三步：排查特殊场景限制
  • 如果你的页面是嵌套在iframe中使用的，需要给外层iframe添加allow="geolocation"属性，否则iframe内的页面无法调用定位接口
  • 检查是否在浏览器隐身模式下测试，大部分浏览器的隐身模式默认禁用定位权限，不会弹出申请窗口
  • 如果此前手动拒绝过该站点的位置权限，浏览器会记住选择不再弹窗，可以到浏览器隐私设置中清空该站点的权限配置后重试

内容的提问来源于stack exchange，提问作者Sky Lurk