Http post request header issue

Ionic Framework ionic-v3
1

Can’t resolve all parameters for Headers: (?). i got this error message when i import headres from angular/http.

import { HttpModule, Headers, URLSearchParams} from ‘@angular/http’;

providers: [
StatusBar,
SplashScreen,
Geolocation,
Headers,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

if anyone have an idea about this please share,how to resolve this.

2

Please share you ts file like Home.ts you have to pass parameter inside the constructor

like
constructor( headers :Headers ){
}
I hope your problem will be fix
thanks

3

Need a constructor with an instance of the Header.
constructor (headers: Headers) {
//stuffs
}

1 Like
4

constructor(public navCtrl: NavController,
public geolocation: Geolocation,
public http: Http,
public headers: Headers)

i write already… but still issue occurs

5

Hi, @roshanroshan

What is exact error could you print here.

thanks

6

Uncaught Error: Can’t resolve all parameters for Headers: (?).
at syntaxError (compiler.js:466)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15547)
at CompileMetadataResolver._getTypeMetadata (compiler.js:15382)
at CompileMetadataResolver._getInjectableMetadata (compiler.js:15362)
at CompileMetadataResolver.getProviderMetadata (compiler.js:15722)
at compiler.js:15633
at Array.forEach ()
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15593)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15161)
at JitCompiler._loadModules (compiler.js:33542)

thanks

7

Hi, @roshanroshan

try below code:

In Your app.module.ts

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Toast,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RequestProvider
  ]
})
export class AppModule {}

=> In your home.ts file

import { Http , Headers, RequestOptions} from '@angular/http';
........
  constructor(public http: Http) {}
   //Your API

  let url = this.hostname + endPoint;
    let headers = new Headers();
    headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('content-type','application/json');
      let options = new RequestOptions({ headers:headers});
    return new Promise((resolve,reject)=>{
       this.http.post(url,JSON.stringify(data), options).subscribe(res => {
          resolve(res.json());
        }, (err) => {
          reject(err);
        });
    })

thanks

8

now it gives me

polyfills.js:3 OPTIONS ‘API-URL’ 405 (Method Not Allowed)

9

could you print your full error here

10

Failed to load API_URL: Response for preflight has invalid HTTP status code 405.

can you please provide “data” sample how to provide parameter as a json input.

Thanks

11

it’s simple

this.data = {username : 'xxx',password:'yyyy' };

thanks

12

I think something in the methode is missing from my side…
may be mehode hits target as get().

This is output when i hit api url

The requested resource does not support http method 'GET'.

API is working perfectly.

13

could you print your code here of get method and also your app.module.ts where you intigrete Http

thanks

14

this is my code

let headers = new Headers();
headers.append(‘Access-Control-Allow-Origin’ , ‘*’);
headers.append(‘Access-Control-Allow-Methods’, ‘POST, GET, OPTIONS, PUT’);
headers.append(‘Accept’,‘application/json’);
headers.append(‘content-type’,‘application/json’);

let options = new RequestOptions({ headers: headers });
this.http.post(‘http://localhost/api/save/ToDb’,
JSON.stringify({name:‘abc’, a:‘12.014567’, b:‘2.0147852’}),
options).map(res => res.json())
.subscribe(res => {
console.log(res);
}, (err) => {
console.log(err);
});
but it is not working

15

hii,
i found one solution for the current issue.
My api is developed using .net framework so there need to handle input request
just write
[HttpOptions]
[HttpPost] above the api methode.
My above typescript code is correct and now it is working fine.
Thanks All.