本地开发环境GLPK.js导入失败问题求助

问题1：本地文件导入触发CORS错误 #

直接通过import GLPK from '../dist/index.js'导入本地GLPK.js文件时，浏览器报错：

Access to script at 'file:///C:/Users/luiza/Documents/Documentos/PO/jogos/meu_jogo/glpk.min.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

原因：用file://协议打开本地HTML文件时，页面origin为null，浏览器CORS策略禁止此类跨源请求。

解决：启动本地HTTP服务器访问页面：

• Python 3：执行python -m http.server，访问http://localhost:8000/你的页面.html
• Node.js：安装serve（npm install -g serve）后执行serve，访问对应地址

问题2：CDN导入的导出命名错误 #

用import GLPK from 'https://cdn.jsdelivr.net/npm/glpk.js@4.0.2/dist/glpk.min.js'导入时，报错：

Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/glpk.js@4.0.2/dist/glpk.min.js' does not provide an export named 'default' (at teste.html:6:16)

原因：GLPK.js的CDN包为UMD格式，未提供ES模块默认导出，无法直接用默认导入语法。

解决：改用命名导入获取默认导出，修正后导入代码：

import * as GLPKModule from 'https://cdn.jsdelivr.net/npm/glpk.js@4.0.2/dist/glpk.min.js';
const glpk = await GLPKModule.default();

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Optimal Transportation Problem with GLPK.js</title>
    <script type="module">
        // 修正CDN导入方式
        import * as GLPKModule from 'https://cdn.jsdelivr.net/npm/glpk.js@4.0.2/dist/glpk.min.js';
        (async () => {

            const glpk = await GLPKModule.default();

            function print(res) {
                const el = window.document.getElementById('out');
                el.innerHTML = `Solution: Transportation Problem\n\n ${JSON.stringify(res, null, 2)}`;
            };

            // 定义运输问题
            const supply = [20, 30, 25]; // 各供应商供应量
            const demand = [10, 25, 20, 20]; // 各消费者需求量

            // 运输成本
            const costs = [
                [8, 6, 10, 9],  // 供应商1的成本
                [9, 12, 13, 7], // 供应商2的成本
                [14, 9, 16, 5]  // 供应商3的成本
            ];

            const numSuppliers = supply.length;
            const numConsumers = demand.length;

            // 决策变量与目标函数
            let variables = [];
            for (let i = 0; i < numSuppliers; i++) {
                for (let j = 0; j < numConsumers; j++) {
                    variables.push({ name: `x_${i}_${j}`, coef: costs[i][j] });
                }
            }

            // 供应量约束
            let constraints = [];
            for (let i = 0; i < numSuppliers; i++) {
                let vars = [];
                for (let j = 0; j < numConsumers; j++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `supply_${i}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: supply[i], lb: supply[i] } });
            }

            // 需求量约束
            for (let j = 0; j < numConsumers; j++) {
                let vars = [];
                for (let i = 0; i < numSuppliers; i++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `demand_${j}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: demand[j], lb: demand[j] } });
            }

            // 问题配置
            const lp = {
                name: 'Transportation Problem',
                objective: {
                    direction: glpk.GLP_MIN,
                    name: 'obj',
                    vars: variables
                },
                subjectTo: constraints
            };

            const opt = {
                msglev: glpk.GLP_MSG_OFF
            };

            // 求解问题
            const solution = await glpk.solve(lp, opt);
            print(solution);

            console.log(await glpk.solve(lp, glpk.GLP_MSG_DBG));

            window.document.getElementById('cplex').innerHTML = await glpk.write(lp);

        })();
    </script>
</head>
<body>
    <h1>Optimal Transportation Problem with GLPK.js</h1>
    <pre id='cplex'></pre>
    <pre id='out'></pre>
</body>
</html>

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