通过 angular http post 将 json 数据发送到 laravel 控制器

Posted

技术标签:

【中文标题】通过 angular http post 将 json 数据发送到 laravel 控制器【英文标题】:Send json data via angular http post to laravel controller 【发布时间】:2019-04-12 17:36:30 【问题描述】:

我是 laravel 和 angular 的新手。我试图将一些数据从服务发送到 laravel 控制器中的函数。 这是我的 laravel 代码:

public function authenticate(Request $request)
    file_put_contents('test.txt','run');

    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Methods: GET, POST, DELETE, PUT, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With');
    header('Access-Control-Allow-Credentials: true');

    $name=$request->input('name');
    $password=$request->input('password');
    $message='Not Found';

    $user=User::where(['name'=>$name])->first();
    if($user->checkPasswordAttribute($password))
        $message='Found';
    
    return response()->json([
        'message' => $message,
    ]);

这是我通过 json 的角度服务代码:

login(user: User): Observable<User> 
return this.http.post<User>(this.usersUrl, user, httpOptions).pipe(
  tap( _ => this.log('fetched user')),
  catchError(this.handleError<User>(`getUser`))
);

使用这个 HttpHeaders:

const httpOptions =   headers: new HttpHeaders( 'Content-Type':  'application/json' );

上面的代码什么都不发送,甚至不运行我为测试添加的 file_put_content。 但是当我在 Angular 服务中使用 formData 作为下面的代码时,一切正常并运行我的后端代码。

login(user: User): Observable<User> 
const postData = new FormData();
postData.append('name', user.name);
postData.append('password', user.password);
return this.http.post<User>(this.usersUrl, postData).pipe(
  tap( _ => this.log('fetched user')),
  catchError(this.handleError<User>(`getUser`))
);

有人可以给我建议吗?

【问题讨论】:

首先,您是否在“storage/logs/*”中检查了您的logs,实际问题是什么。 谢谢你,我检查了日志并显示此错误消息“从源 'localhost:4200' 访问 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应没有” t 通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。”。所以我使用这个网站tekina.info/cors-problem-laravel-angular 它解决了我的问题 【参考方案1】:

这将解码 http 请求 json 有效负载。

$data = json_decode($request->getContent(), true);

【讨论】:

以上是关于通过 angular http post 将 json 数据发送到 laravel 控制器的主要内容,如果未能解决你的问题,请参考以下文章

angular js $http服务使用

如何在Angular.js $http.post中指定dataType:'json'?

Angular.js $http.post TypeError:无法读取未定义的属性“数据”

使用 Angular.js 的 HTTP POST

通过 angular http post 将 json 数据发送到 laravel 控制器

angular js使用post方法将空数据发送到php