0

angular js 2ベータ版を使用してWebサービスを利用しています。私のWebサービスは次のとおりです。

これは、 http://localhost:8080/testにアクセスしたときのブラウザー出力です。

[{"名前":"バスカー"},{"名前":"アーロン"}]

以下は私のコードです、

app.component.ts

import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map'

@Component({
    selector: 'my-app',
    viewProviders: [HTTP_PROVIDERS],
    template: `<h1>My First Angular 2</h1>           
     <div>
      <h1>People</h1>
      <ul>
        <li *ngFor="#person of people">
          {{person.name}}
        </li>
      </ul>
    </div>`
})
export class AppComponent {
    people: Object[];
    constructor(http: Http) {
        //working with plain json file but not with ws
        http.get('http://localhost:8080/test')
            .map(res => res.json())
            .subscribe(people => this.people = people);
    }
}

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

ブラウザのコンソールに次のように表示されます。

The connection to ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=WJv1vqSBu7HYFxTmAAAA was interrupted while the page was loading. browser-sync-client.2.11.1.js:3:0
ReferenceError: require is not defined http.js:7:5
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. angular2.dev.js:351:5
EXCEPTION: [object Object] angular2.dev.js:23524
EXCEPTION: [object Object] angular2.dev.js:23514:9

STACKTRACE: angular2.dev.js:23514:9



-----async gap-----
_getStacktraceWithUncaughtError@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26
[2]</</module.exports.$fork/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40
[2]</</Zone.prototype.bind@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:43
patchEventTargetMethods/obj.addEventListener@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1089:1
XHRConnection/this.response<@https://code.angularjs.org/2.0.0-beta.0/http.dev.js:674:9

私の春のウェブサービス、

@RequestMapping(value = { "/test" },method = RequestMethod.GET,headers="Accept=application/json")
public  List<People> testSetvice(){
    System.out.println("hello");
    List<People> li=new ArrayList<>();
    li.add(new People("Bhasker"));
    li.add(new People("Aaron"));
    return li;

}

ただし、http://localhost:8080/testをローカル ファイルである people.json に変更すると、機能します。

ありがとう

4

1 に答える 1

0

別のサーバーからデータをリクエストしているようです。スクリプトはポート 3000 で実行されており、ポート 8080 からデータを取得しようとしています。これはセキュリティ上の問題です。

クロスオリジン HTTP リクエストを試みています: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

于 2016-01-29T13:19:24.080 に答える