Content Security Policy阻止JS加载及地理定位功能失效求助

问题核心 #

你遇到两个关键问题：一是Content Security Policy (CSP) 拦截了tester.js的加载，二是代码本身存在语法/逻辑错误，导致按钮点击无任何反馈。

1. 解决CSP阻止JS加载问题 #

CSP通过规则限制资源加载来源，要允许本地JS文件加载，可在HTML的<head>中添加CSP meta标签：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; default-src 'self'">

• 'self'：允许加载当前域名（本地文件属于同一源）的资源
• 'unsafe-inline'：兼容内联脚本需求（这里主要确保外部脚本能正常加载）

如果CSP是通过服务器配置（如Nginx、Apache）设置的，需修改服务器配置文件中的CSP规则，新增script-src 'self'条目。

2. 修复HTML按钮的点击事件绑定 #

原按钮使用的function="onClick()"是无效属性，HTML按钮的点击事件需用标准的onclick（小写）属性：

<button onclick="onClick()">Grab my location</button>

3. 修复JavaScript代码的逻辑错误 #

原JS代码存在多处致命问题：

• successCallback未接收position参数，无法获取经纬度数据
• errorCallBack被嵌套在successCallback内部，外部无法调用
• 所有错误提示文案重复，无法区分错误类型
• 函数定义格式混乱，存在多余空格

修正后的tester.js：

function onClick() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successCallback, errorCallBack);
    } else {
        alert("Geolocation is not supported by this browser");
    }
}

function successCallback(position) {
    console.log(position);
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);

    alert(`Latitude is ${position.coords.latitude} and Longitude is ${position.coords.longitude}`);
}

function errorCallBack(error) {
    let message = "";
    switch(error.code) {
        case error.PERMISSION_DENIED:
            message = "You denied the request for Geolocation.";
            break;
        case error.POSITION_UNAVAILABLE:
            message = "Location information is unavailable.";
            break;
        case error.TIMEOUT:
            message = "The request to get your location timed out.";
            break;
        case error.UNKNOWN_ERROR:
            message = "An unknown error occurred.";
            break;
    }
    alert(message);
}

最终完整代码 #

tester.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML Page</title>
    <!-- 添加CSP规则允许本地脚本加载 -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; default-src 'self'">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        header, footer {
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
        }
        nav {
            margin-bottom: 20px;
        }
        nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
        }
        main {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<h1>Choose a country</h1><br>
<!-- 修复onclick属性 -->
<button onclick="onClick()">Grab my location</button>   
<script type="text/javascript" src="tester.js"></script>
</body>
</html>

tester.js #

function onClick() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successCallback, errorCallBack);
    } else {
        alert("Geolocation is not supported by this browser");
    }
}

function successCallback(position) {
    console.log(position);
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);

    alert(`Latitude is ${position.coords.latitude} and Longitude is ${position.coords.longitude}`);
}

function errorCallBack(error) {
    let message = "";
    switch(error.code) {
        case error.PERMISSION_DENIED:
            message = "You denied the request for Geolocation.";
            break;
        case error.POSITION_UNAVAILABLE:
            message = "Location information is unavailable.";
            break;
        case error.TIMEOUT:
            message = "The request to get your location timed out.";
            break;
        case error.UNKNOWN_ERROR:
            message = "An unknown error occurred.";
            break;
    }
    alert(message);
}

内容的提问来源于stack exchange，提问作者Haqq Tertuliano