Cross-Origin Request Blocked in angularjs2 and back end java

Question

I can't access data from api.I am getting following error in get request.

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());
    }
}

I am getting following output.

Output

At serverside..

    @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;
    }

I am use java in back end for API provider. Thanks in advance....

the service running at `http://192.168.2.3:8080` needs to allow CORS (cross origin resource sharing) - you didn't need to post all your code, the error is right there in the first screenshot ... CORS ... — Jaromanda X, Nov 15 '16 at 04:51
Seems like the server you're connecting to doesn't support CORS. In order to make cross origin requests the server needs to return specific headers, otherwise the browser blocks the request. [More info on CORS](https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS) — Nitzan Tomer, Nov 15 '16 at 04:51
Possible duplicate of [How to enable CORS in AngularJs](http://stackoverflow.com/questions/23823010/how-to-enable-cors-in-angularjs) — Nitzan Tomer, Nov 15 '16 at 04:52
@ Jaromanda X how to allow CORS from http://192.168.2.3:8080 — CTN, Nov 15 '16 at 04:57
It's better if you allow the CORS on the server side. Post the server side code here. — Pritam Banerjee, Nov 15 '16 at 05:19

score 0 · Answer 1 · answered Nov 15 '16 at 05:30

After set @CrossOrigin it's working..

@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;
    }

Thanks @Jaromanda X.

Cross-Origin Request Blocked in angularjs2 and back end java

1 Answers1