StealJS错误:协议方案不支持跨域请求

Question

我遇到了这样的错误：

XMLHttpRequest cannot load file:///Users/mshin/workspace/spirent/trinity/trinity-link/public/node_modules/can/view/stache/system.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

home.js：

import can from 'can';
import template from './home.stache!';

export default can.Component.extend({
  tag: 'home',
  template: template
});

Gruntfile中的构建配置：

"steal-build": {
  default: {
    options: {
      system: {
        config: "package.json!npm",
        bundlesPath: "production"
      },
      buildOptions: {
        minify: true,
        sourceMaps: true
      }
    }
  }
}

我不知道为什么在生产模式下会收到这个错误消息。在开发环境中，它工作得很好。此外，它在测试环境中也很好用。我正在对被测试者运行QUnit测试。

home_test.js：

import QUnit from 'steal-qunit';
import ViewModel from 'components/home/home';
import can from 'can';
import stache from 'can/view/stache/';
import $ from 'jquery';

var template = can.stache('<home></home>'),
    $component;

QUnit.module('home component', {
  setup: function() {
    $('#trinity-js-tests').html(template());
    $component = $('#trinity-js-tests').find('home');
  }
});

QUnit.test('title tag', function() {
  QUnit.ok($component.find('h1'), 'Page shows title with <h1> tag');
});

QUnit.test('title content', function() {
  QUnit.strictEqual($component.find('h1').text(), 'This is homepage.', 'Title is "This is homepage."');
});

但是，如果我将home.js改为如下所示：

import can from 'can';

export default can.Component.extend({
  tag: 'home',
  template: can.view('components/home/home.stache)
});

它在生产和开发环境中运行良好，但在测试中最后一个测试用例失败。

1) QUnit "public/tests/test.html" on PhantomJS 1.9.8 / Mac OS X 0.0.0: <a href="http://localhost:3996/public/tests/test.html?__token=k8l88m"></a>  home component title content Title is "This is homepage.":
     Error: Expected This is homepage. but was
      at http://localhost:3996/public/tests/test.html?__token=k8l88m:1340
      at http://localhost:3996/public/tests/test.html?__token=k8l88m:1907
      at :33
      at http://localhost:3996/public/tests/test.html?__token=k8l88m:895
      at http://localhost:3996/public/tests/test.html?__token=k8l88m:1024
      at process (http://localhost:3996/public/tests/test.html?__token=k8l88m:583)
      at begin (http://localhost:3996/public/tests/test.html?__token=k8l88m:628)
      at http://localhost:3996/public/tests/test.html?__token=k8l88m:644

Answer 1

看起来您是从file:// protocol加载的，对吗？如果是这样，这可能就是您的问题所在。

Answer 2

我找到了我在代码中遗漏的地方。

main.js

import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';

我没有在里面导入can/view/stache/system。要在can.stache中使用系统插件，我需要将特定文件导入到主javascript文件中。

因此，该文件应该是

import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import 'can/view/stache/system';   // this is the added line
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';