是否需要将所有HTTP请求重定向到HTTPS？协议相对URL加载模块出错如何处理

• 协议相对URL（//开头）会继承当前页面的访问协议，你从http://localhost:8080访问页面时，该URL会被解析为http://briskreader.com/components/feed-list.js
• ES模块脚本（type="module"）遵循严格的CORS校验规则，和普通脚本的宽松跨域规则不同：如果请求触发了HTTP→HTTPS的301重定向，浏览器要求重定向的301响应本身以及重定向后的目标资源响应都必须携带允许当前源（http://localhost:8080）的CORS头，只要其中一步缺失就会触发CORS报错
• 直接使用HTTPS开头的URL时，不会触发跨协议重定向，只要HTTPS站点配置了正确的CORS头就能正常加载，所以你会发现这种方式可以正常运行

方案1（最推荐）：统一使用HTTPS绝对路径 #

直接将所有模块脚本的src改为HTTPS开头的绝对路径即可，协议相对URL本身已经属于不推荐的写法，当下主流浏览器对混合内容（HTTP站点加载HTTPS资源）的限制很宽松，但是反过来HTTPS站点加载HTTP资源会直接拦截，统一写HTTPS路径可以完全避免协议解析歧义。

方案2（保留协议相对URL）：调整Nginx配置 #

如果必须保留协议相对URL，需要调整Nginx的80端口（HTTP）和443端口（HTTPS）配置，给重定向响应和模块资源都加上符合要求的CORS头：

80端口配置示例 #

server {
    listen 80;
    server_name briskreader.com;

    # 匹配模块类JS资源的请求
    location ~* ^/components/.*\.js$ {
        # 给重定向响应加上CORS头
        add_header Access-Control-Allow-Origin "http://localhost:8080";
        add_header Access-Control-Allow-Methods "GET, OPTIONS";
        # 处理OPTIONS预检请求
        if ($request_method = OPTIONS) {
            add_header Access-Control-Allow-Origin "http://localhost:8080";
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Max-Age 86400;
            return 204;
        }
        return 301 https://$host$request_uri;
    }

    # 其他请求正常跳转HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

443端口配置示例 #

server {
    listen 443 ssl;
    server_name briskreader.com;
    # SSL证书等常规配置省略

    location ~* ^/components/.*\.js$ {
        add_header Access-Control-Allow-Origin "http://localhost:8080";
        add_header Access-Control-Allow-Methods "GET, OPTIONS";
        if ($request_method = OPTIONS) {
            add_header Access-Control-Allow-Origin "http://localhost:8080";
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Max-Age 86400;
            return 204;
        }
        # 静态资源返回的常规配置省略
    }
}

推荐全站配置HTTP强制跳转HTTPS，这是当前行业通用的安全标准，既可以避免数据传输被窃听篡改，也能减少跨协议场景下的CORS、混合内容等兼容性问题，只需要针对跨域加载的静态资源等特殊场景，补充配置重定向阶段的CORS头即可。

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