CodeIgniter4+Select2生产环境HTTPS协议自动变HTTP问题

我在Codeigniter 4框架中使用最新版本的select2组件。同一页面部署了3-4个支持AJAX搜索的下拉框，页面加载时会自动为这些下拉框完成select2初始化，页面中统一使用base_url方法生成动态URL。

相关代码片段 #

表单action配置 #

action="<?= base_url('requests/booking/' . (isset($file['myId']) ? $file['myId'] : '')) ?>"

渲染后得到地址：

https://mysiteurl.com/requests/booking/myId

上述代码可正常生成与当前域名一致的https协议URL。

下拉框配置 #

select2下拉框配置属性如下：

<select class="ms select2 select2-ajax companyAddress"
     data-call-url="<?= base_url('ajax/bookingShipperAddress') ?>"
     data-placeholder="Company">
</select>

上述代码中配置的data-call-url属性，在select2初始化时协议会从https变为http，其余仅接口端点不同的下拉框也存在相同问题。

jQuery初始化代码 #

applySelect2: function (className = 'select2-ajax') {
    $('.' + className).each(function () {
        var url = $(this).data('call-url');
        let placeholder = $(this).data('placeholder');
        if (url && ((url != "undefined") || (url != "undefined"))) {
            $(this).select2({
                placeholder: placeholder ?? 'Select an option',
                ajax: {
                    url : url,
                    dataType: 'json'
                }
            });
        } else {
            $(this).select2({
                placeholder: 'Select an option'
            });
        }
        $(this).removeClass(className)
    });
    /**
     * 可通过如下代码获取选中值的其他属性
     *
     *  var select2Obj = $(this).select2('data').find(item => item.element.selected);
     */
}

由于本地环境为http协议，该问题在本地运行无异常，但在production（生产）环境下会触发混合内容请求错误。经页面元素核对：表单渲染的action地址与页面HTTPS协议完全一致，但下拉框配置的AJAX地址传入select2时会被转为HTTP协议。

解决方案 #

按优先级从高到低排查修复即可：

• 修正CodeIgniter 4框架配置
  打开项目配置文件app/Config/App.php：
  1. 确认生产环境$baseURL参数值为https://开头的完整站点域名，不要使用http://开头的地址
  2. 如果站点使用了CDN、Nginx反向代理、负载均衡服务，将$forceGlobalSecureRequests参数设为true，强制框架正确识别HTTPS请求，避免生成HTTP协议的链接。
• 调整JS属性读取逻辑
  先查看页面原始源码（不要用元素审查面板），如果源码中data-call-url已经是HTTPS开头，但JS读取后变为HTTP，是jQuery的.data()方法自动做格式解析导致的，将读取URL的代码从var url = $(this).data('call-url');改为读取原始属性，绕过jQuery的自动解析逻辑：

  var url = $(this).attr('data-call-url');
  

• 前端兜底兼容
  如果暂时不方便调整后端配置，可以在JS读取URL后强制匹配当前页面协议，彻底避免混合内容报错：

  var url = $(this).attr('data-call-url').replace(/^http:/, window.location.protocol);
  

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