angular - 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";
}
}
}
解决方案
您还必须在您的 php 服务器上允许 cors 策略
您可以通过在标题中使用访问控制允许来源来做到这一点
<?php
header("Access-Control-Allow-Origin: *");
推荐阅读
- etcd - 在 etcd 集群中添加新成员的问题
- ios - iOS:如何为无输入操作快捷方式定义意图文件
- r - R中有没有办法做一个成对加权相关矩阵?
- azure-application-insights - Application Insights - 计算具有相同操作 ID 的两个事件之间的时间跨度?
- reactjs - 在 react-bootstrap-table 中删除行后状态未更新。有什么问题?
- amazon-web-services - 如何减少 AWS Windows EBS 根卷?
- git - Git错误:git credential-manager-core的waitpid失败:没有子进程
- vb.net - 使用 Visual Basic 从我的桌面删除图像
- azure-devops-server - 是否可以使用 OAuth 令牌克隆 Azure Devops 存储库
- css - 为多个登陆页面优化 CSS