[英]Cross origin requests are only supported for protocol schemes issue in Angular2
I'm trying to complete the Angular Quickstart tutorial but I'm getting the CORS error. 我正在尝试完成Angular Quickstart教程,但遇到了CORS错误。
I configured this host in windows on host file under system32/drivers/etc/: 我在Windows的system32 / drivers / etc /下的主机文件中配置了该主机:
127.0.0.1 tour-of-heroes
I configured this virtual host in apache 我在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>
This is the error: 这是错误:
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
This is what i have tried with no results: 这是我尝试的没有结果的内容:
I'm using WAMP on Windows. 我在Windows上使用WAMP。 I'm not following the quickstart tutorial to the letter because I'm using Grunt for the typescript compiling and that forced me to do things a little bit different. 我没有遵循快速入门教程,因为我使用Grunt进行打字稿编译,这迫使我做一些不同的事情。
This is my systemjs.config.js: 这是我的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);
This is my package.json: 这是我的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"
}
}
This is my index.html: 这是我的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>
This is my grunt ts compiler file: 这是我的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
}
}
};
my main.ts: 我的main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
my app.module.ts 我的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 { }
my app.component.ts: 我的app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }
And this is my file structure: 这是我的文件结构:
Any help would be great, I'm desperate. 任何帮助都会很棒,我很拼命。
Thank you in advance. 先感谢您。
systemjs
only supports the paths
property in versions newer than 0.19.30
. systemjs
仅在低于0.19.30
版本中支持paths
属性。 Update your systemjs
package or stop using the paths
property as mentioned in Michael Desigaud's answer. 按照Michael Desigaud的答案中所述,更新您的systemjs
包或停止使用paths
属性。
You can try like this: replace @npm:
by node_modules/
in the systemjs.config.js file (it works for me): 你可以尝试这样的:替代@npm:
通过node_modules/
在systemjs.config.js文件(我的作品):
(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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.