如何正确加载我的角应用程序与电子throu文件:///？

Question

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

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

因此,当我electron .说它显示空白窗口.我试图index.html通过file:///在Chrome浏览器中打开我,它也是空白的.控制台中的错误

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'
});

图像还有一些其他相同的错误.

我想有两个解决方案.

1. 使用节点运行服务器并更改loadUrl('file:///...')为loadUrl('http:///...')但我不知道如何执行此操作.
2. 做点别的.可能是一些标题或参数,以允许跨源请求,我不知道如何做到这一点.

我怎么解决这个问题？

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.