跨域请求被拦截在angularjs2和后端java

我无法从api访问数据。我在获取请求时遇到以下错误。跨域请求被拦截在angularjs2和后端java

的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>Angular 2 Service Example</title> 

    <!-- libraries --> 
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script> 

    <script> 
     System.config({ 
      transpiler: 'typescript', 
      typescriptOptions: { 
       emitDecoratorMetadata: true 
      }, 
      packages: { 
       'src': { 
        defaultExtension: 'ts' 
       } 
      } 
     }); 

    </script> 

    <script> 
     System.import('src/boot'); 
    </script> 

</head> 

<body> 
    <app-component>Loading...</app-component> 
</body> 
</html>

app.component.tpl.html

<form (ngSubmit)="getCountriesByRegion()"> 
    <label>Region:</label> 
    <input type="text" [(ngModel)]="region" required> 
    <button type="submit">Search</button> 
</form> 
<hr> 
<p style="color:red">{{error}}</p> 
<h1>Countries in {{region}}</h1> 
<pre>{{countries|json}}</pre> 
<div *ngFor="#country of countries">{{country.name}}</div>

个
app.component.ts

import {Component} from 'angular2/core'; 
import {CountryService} from './service/country.service' 

@Component({ 
    selector: 'app-component', 
    templateUrl: 'src/app.component.tpl.html', 
    providers: [CountryService] 
}) 
export class AppComponent { 
    constructor(private _countryService: CountryService){ 
     this._countryService = _countryService; 
    } 

    getCountriesByRegion(){ 
     this.error = ""; 
     this.countries = []; 
     this._countryService.getCountriesByRegion(this.region) 
     .subscribe(
      data => this.countries = data, 
      error => this.error = "Region " + this.region + " is invalid." 
     ); 
} 
}

boot.ts

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

bootstrap(AppComponent, [HTTP_PROVIDERS]);

country.service.ts

import {Injectable} from "angular2/core" 
import {Http} from 'angular2/http'; 
import 'rxjs/Rx' 

@Injectable() 
export class CountryService{ 
    endpoint_url:String = "http://192.168.2.3:8080/erp/hello"; 
    constructor(http: Http){ 
     this.http = http; 
    } 
    getCountriesByRegion (region:String){ 
     return this.http.get(this.endpoint_url + '?name=' + region).map(res => res.json()); 
    } 
}

我得到以下输出。

输出

在服务器端..

@RequestMapping(value = "/hello", method = RequestMethod.GET , produces = MediaType.APPLICATION_JSON_VALUE) 
    @ResponseBody 
    public String printHello(@RequestParam("name") String name) { 


     System.out.println("method is called.................... : " + name); 
     String test = "hello world" ; 
     return test; 
    }

我在API提供商后端使用Java。在此先感谢....

来源

2016-11-15 CTN

在'HTTP运行的服务：//192.168.2.3：8080'需要允许CORS（跨源的资源共享） - 你不需要发布你的所有代码，错误是在那里第一个屏幕截图... CORS ... –

似乎你要连接的服务器doesn'支持CORS。为了创建交叉原点请求，服务器需要返回特定的标题，否则浏览器会阻止该请求。 [更多关于CORS的信息]（https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS） –

[如何在AngularJs中启用CORS]（http://stackoverflow.com/questions/ 23823010/how-to-enable-cors-in-angularjs） –

@CrossOrigin它的工作集后..

@CrossOrigin 
@RequestMapping(value = "/hello", method = RequestMethod.GET , produces = MediaType.APPLICATION_JSON_VALUE) 
    @ResponseBody 
    public String printHello(@RequestParam("name") String name) { 


     System.out.println("method is called.................... : " + name); 
     String test = "hello world" ; 
     return test; 
    }

感谢@Jaromanda X.

来源

2016-11-15 05:30:51 CTN

跨域请求被拦截在angularjs2和后端java

回答

相关问题