仅 Angular2 中的协议方案问题支持跨源请求

Posted 2023-02-27

【中文标题】仅 Angular2 中的协议方案问题支持跨源请求

【英文标题】：Cross origin requests are only supported for protocol schemes issue in Angular2

【发布时间】：2017-02-22 03:43:02

【问题描述】：

我正在尝试完成 Angular 快速入门教程，但遇到了 CORS 错误。

我在 Windows 中的 system32/drivers/etc/ 下的主机文件中配置了此主机：

127.0.0.1       tour-of-heroes

我在apache中配置了这个虚拟主机

<VirtualHost *:80>
    DocumentRoot "xxxxxxxxxxx/tour-of-heroes"
    ServerName tour-of-heroes
    <Directory />
        DirectoryIndex index.html
        AllowOverride All
        Order Deny,Allow
        Deny from all
        Allow from 127.0.0.1
    </Directory>
</VirtualHost>

这是错误：

system.src.js:1049 XMLHttpRequest cannot load npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
(index):16 Error: XHR error loading npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js(…)(anonymous function) @ (index):16run @ zone.js:115zoneBoundFn @ zone.js:88run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:1049 XMLHttpRequest cannot load npm:@angular/core/bundles/core.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:1049 XMLHttpRequest cannot load npm:@angular/platform-browser/bundles/platform-browser.umd.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.fetchTextFromURL @ system.src.js:1049(anonymous function) @ system.src.js:1555(anonymous function) @ system.src.js:1554(anonymous function) @ system.src.js:2446(anonymous function) @ system.src.js:3011(anonymous function) @ system.src.js:3244(anonymous function) @ system.src.js:3840(anonymous function) @ system.src.js:4031(anonymous function) @ system.src.js:4277(anonymous function) @ system.src.js:326run @ zone.js:115zoneBoundFn @ zone.js:88
system.src.js:291 Assertion failed: loading or loaded

这是我尝试过的，但没有结果：

Allow Control Allow Origin Google Chrome 浏览器扩展。 apache 中的头模块。

我在 Windows 上使用 WAMP。我没有完全按照快速入门教程进行操作，因为我使用 Grunt 进行打字稿编译，这迫使我做一些不同的事情。

这是我的 systemjs.config.js：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) 
  System.config(
    paths: 
      // paths serve as alias
      'npm:': 'node_modules/'
    ,
    // map tells the System loader where to look for things
    map: 
      // our app is within the app folder
      app: 'js/tour-of-heroes2',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      //'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    ,
    // packages tells the System loader how to load when no filename and/or no extension
    packages: 
      app: 
        main: './main.js',
        defaultExtension: 'js'
      ,
      rxjs: 
        defaultExtension: 'js'
      ,
      /*'angular-in-memory-web-api': 
        main: './index.js',
        defaultExtension: 'js'
      */
    
  );
)(this);

这是我的 package.json：

  "name": "AngularJS2",
  "version": "1.0.0",
  "author": "author",
  "description": "Project Tour of Heroes",
  "scripts": 
    "postinstall": "typings install"
  ,
  "dependencies": 
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "core-js": "^2.4.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "bootstrap": "^3.3.6"
  ,
  "devDependencies": 
    "grunt": "^0.4.5",
    "grunt-concurrent": "^2.0.3",
    "grunt-contrib-copy": "^0.8.1",
    "grunt-contrib-jshint": "^0.11.3",
    "grunt-ts": "^5.5.0-beta.2",
    "load-grunt-config": "^0.17.2",
    "jshint-stylish": "^2.0.1",
    "time-grunt": "^1.2.1",
    "typings":"^1.4.0"
  

这是我的 index.html：

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="styles.css">-->
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err) console.error(err); );
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

这是我的 grunt ts 编译器文件：

module.exports = 
    base: 
        src: ['src/**/*.ts'],
        dest: 'js/tour-of-heroes/',
        options: 
            module: 'system', //or commonjs
            moduleResolution: 'node',
            target: 'es2015', //or es3 
            sourceMap: true,
            declaration: true,
            emitDecoratorMetadata: true,
            experimentalDecorators: true,
            removeComments: false,
            noImplicitAny: false
        
    
;

我的 main.ts：

import  platformBrowserDynamic  from '@angular/platform-browser-dynamic';
import  AppModule  from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

我的 app.module.ts

import  NgModule       from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  AppComponent    from './app.component';

@NgModule(
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
)

export class AppModule  

我的 app.component.ts：

import  Component  from '@angular/core';
@Component(
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
)
export class AppComponent  

这是我的文件结构：

任何帮助都会很棒，我很绝望。

提前谢谢你。

【问题讨论】：

有什么想法吗？

【参考方案1】：

systemjs only supports the paths property in versions newer than 0.19.30. 更新您的 systemjs 包或停止使用 Michael Desigaud 的回答中提到的 paths 属性。

【参考方案2】：

您可以这样尝试：在 systemjs.config.js 文件中将@npm: 替换为node_modules/（它适用于我）：

(function (global) 
  System.config(
    paths: 
      // paths serve as alias
      'npm:': 'node_modules/'
    ,
    // map tells the System loader where to look for things
    map: 
      // our app is within the app folder
      app: 'js/tour-of-heroes2',
      // angular bundles
      '@angular/core': 'node_modules/angular/core/bundles/core.umd.js',
      '@angular/common': 'node_modules/angular/common/bundles/common.umd.js',
      '@angular/compiler': 'node_modules/angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'node_modules/rxjs',
      //'angular-in-memory-web-api': 'node_modules/angular-in-memory-web-api',
    ,
    // packages tells the System loader how to load when no filename and/or no extension
    packages: 
      app: 
        main: './main.js',
        defaultExtension: 'js'
      ,
      rxjs: 
        defaultExtension: 'js'
      ,
      /*'angular-in-memory-web-api': 
        main: './index.js',
        defaultExtension: 'js'
      */
    
  );
)(this);