首页 > 解决方案 > Angular http post请求失败

问题描述

我正在使用angular 8 / ionic 4构建一个移动应用程序我正在尝试在我的后端提交一个表单,它是Wordpress 自定义端点,该端点的工作是将woocommerce产品添加到购物车中。

当我尝试通过邮递员进行发布请求时,它可以工作并将产品发送到购物车。

但是,当尝试使用Angular执行相同的请求时,返回成功消息没有按照预期将请求发送到购物车。

我的角度代码:

  addYithCompositeToCart(id: any) {

    const { token } = JSON.parse(localStorage.getItem('user'));

    let headers = {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      "Authorization": `Bearer ${token}`,
      // 'Cookie': localStorage.getItem('cookie')
    };

    let data = {
      "ywcp_selection[153CE4EE-C1A0-6D39-9AD5-58B51C5AB306]": "-1",
      "ywcp_variation_id[153CE4EE-C1A0-6D39-9AD5-58B51C5AB306]": "124136",
      "ywcp_quantity[153CE4EE-C1A0-6D39-9AD5-58B51C5AB306]": "1",
      "ywcp_selected_product_value[153CE4EE-C1A0-6D39-9AD5-58B51C5AB306]": "10",
      "ywcp_selection[471BAD03-9C3B-B44E-8584-348A5F33F8A6]": "-1",
      "attribute_pa_sphere[471BAD03-9C3B-B44E-8584-348A5F33F8A6]": "5-75",
      "ywcp_variation_id[471BAD03-9C3B-B44E-8584-348A5F33F8A6]": "110359",
      "ywcp_quantity[471BAD03-9C3B-B44E-8584-348A5F33F8A6]": "1",
      "ywcp_selected_product_value[471BAD03-9C3B-B44E-8584-348A5F33F8A6]": "102552",
      "quantity": "1",
      "add-to-cart": "102491",
    }



    let payload = new FormData();
    // // data = new FormData();

    // payload; 
    for (let key in data) {
      payload.append(key, data[key]);
    }

    this.http.post(`${environment.host}yith-composite/add-item?id=${id}`, payload, {
      headers
    })
      .toPromise()
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.log(error);
      });

  }

邮递员的要求还: 在此处输入图像描述

更新

我想在后端进行更多验证的原因是什么,

我从我的 Angular 应用程序发送的正文在我的后端不可读,因此它返回一个空数组,另一方面 Postman 正文我的 PHP 代码正在读取它,因为它工作正常。

php代码

function yith_custom_add_item( WP_REST_Request $request ) {
    $currentuserid_fromjwt = get_current_user_id();
    $user = get_user_by( 'id', $currentuserid_fromjwt );
    
    
    if( $user ) {
        
        $product_id = $_GET['id'];
        $url = get_permalink( $product_id );
        
        $cookie = 'wordpress_logged_in_856ec7e7dd32c9b2fc11b366505cf40d' . '=' . wp_generate_auth_cookie($currentuserid_fromjwt, time() + (10 * 365 * 24 * 60 * 60), 'logged_in') . ';';

        $cookie .='_icl_current_admin_language_d41d8cd98f00b204e9800998ecf8427e=en; wp_woocommerce_session_856ec7e7dd32c9b2fc11b366505cf40d=171%7C%7C1575326201%7C%7C1575322601%7C%7Cab91a0f0bbe0f3d5ae90dd5bdf7e396d; wfwaf-authcookie-5372c020d00bf5e1ea6c81123ff21ec1=171%7C%7C4574b4a9b1b62c8c7a1c1ae24cd4bd26d279bb5670fe87bcf7eb210835e43f22; _icl_current_language=en; PHPSESSID=5ed2009813f86633694a25e297d4ee06; wordpress_logged_in_856ec7e7dd32c9b2fc11b366505cf40d=deleted; woocommerce_items_in_cart=1; woocommerce_cart_hash=086ae7e00c53740163451a538fe8a9fc';


        if ( !empty($_POST) ) {
            $response = wp_remote_post( $url, array(
                'headers' => array(
                   'Cookie' => $cookie,
                   'Authorization' => $request->get_header('Authorization'),
                   'Content-Type' => 'application/x-www-form-urlencoded',
                ),
                'body'    => $_POST,
                
            ));
            
            return $response;
        } else {
            return "No body";
        }

        
    }
    
}

标签: angularionic-framework

解决方案


您还必须在您的 php 服务器上允许 cors 策略

您可以通过在标题中使用访问控制允许来源来做到这一点

<?php header("Access-Control-Allow-Origin: *");


推荐阅读