Question

我有一个简单的Angular应用程序，它位于我项目的www文件夹中。当我通过http：//服务器或虚拟主机运行它时，它在浏览器中正常工作。但是index.js将此加载为文件

mainWindow.loadUrl('file://' + __dirname + '/www/index.html');

所以，当我发出electron .时，它会显示空白窗口。我尝试通过file：///在Chrome浏览器中打开我的index.html，它也是空白的。控制台中的错误

XMLHttpRequest无法加载file：///Users/Sergey/Sites/Electron-test/www/partials/layout.html。交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource。（匿名函数）@ angular.js：10722

这是因为在路由器上ui

$stateProvider.state("app", {
    url: '/',
    templateUrl: 'partials/layout.html'
});

图像还有其他一些错误。

我想有两个解决方案。

使用节点运行服务器并将loadUrl('file:///...')更改为loadUrl('http:///...')，但我不知道该怎么做。
做点别的事。可能是一些标题或参数，以允许跨源请求，我不知道如何做到这一点。

我该如何解决这个问题？

Answer 1

经过一段时间后，我已经想出如何做到这一点，现在Electron构建应用程序并且运行完美。这是电子消耗的整个index.js作为起点。

'use strict';
var http = require('http');
var path = require('path');
var fs = require('fs');
var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
    if(process.platform != 'darwin') {
        app.quit();
    }
});

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    var server = http.createServer(requestHandler).listen(9527);

    mainWindow.loadUrl('http://localhost:9527/index.html');
    mainWindow.webContents.on('did-finish-load', function() {
        mainWindow.setTitle(app.getName());
    });
    mainWindow.on('closed', function() {
        mainWindow = null;
        server.close();
    });
});

function requestHandler(req, res) {
    var
        file    = req.url == '/' ? '/index.html' : req.url,
        root    = __dirname + '/www',
        page404 = root + '/404.html';

    getFile((root + file), res, page404);
};

function getFile(filePath, res, page404) {

    fs.exists(filePath, function(exists) {
        if(exists) {
            fs.readFile(filePath, function(err, contents) {
                if(!err) {
                    res.end(contents);
                } else {
                    console.dir(err);
                }
            });
        } else {
            fs.readFile(page404, function(err, contents) {
                if(!err) {
                    res.writeHead(404, {'Content-Type': 'text/html'});
                    res.end(contents);
                } else {
                    console.dir(err);
                }
            });
        }
    });
};

这是一个起点。您所要做的就是更改root参数以指示您的index.html根文件夹。但我相信如果你构建通用应用程序，那将是www。

如何使用电子文件正确加载我的角度应用程序文件：///？

1 个答案: