HTTP Request from Angular 5 to Lumen Rest API

Question

I am having a problem with sending HTTP request from angular 5 front-end app to lumen back-end restful api.

Well, simply I want to sign up a user.

here is my lumen back-end code for handling the creation of a user :

public function create(Request $request)
{
    $this->validate($request, [
      'screen_name' => 'required',
      'email' => 'required',
      'password' => 'required'
    ]);

    $request['api_token'] = app('hash')->make(str_random(60));
    $request['password'] = app('hash')->make($request->password);

    $user = User::create($request->all());

    return response()->json($user, 201);

}

I have checked the back-end and it works fine with POSTMAN.

Now in angular 5 :

registerUser(value){
var Indata={
  screen_name: value.scrname,
  email: value.email,
  password: value.password
}


return this.http.post(window.location.hostname+':1000/api/v1/users/',Indata);

}

And this angular request is also checked with public fake api to be tested and it works fine.

So, first I was getting CORS problem because the lumen api server and my angular server is working under local server. Then I added :

window.location.hostname

Instead of :

http://localhost

It solved the CORS problem but now I get a problem which I am not understanding where is the problem ?

error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: 
false, … }
headers: Object { normalizedNames: Map, lazyUpdate: null, headers: Map }
message: "Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: null

I have found an angular proxy config also regarding this problem, but it didn't work.

So, any help would be appreciated. Thanks.

score 0 · Answer 1 · edited Jun 06 '20 at 21:23

Did you try: this.http.post('/api/v1/users/',Indata) ?

Do you have a proxy.conf.json in your src folder?

proxy.conf.json:

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug"
  }
}

in angular.json under the "serve" goes like this:

"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
   "browserTarget": "frontend:build",
   "proxyConfig": "src/proxy.conf.json"
}

And you have to set a CorsMiddleware in your lumen too.

HTTP Request from Angular 5 to Lumen Rest API

1 Answers1