مشكلة إرسال الطلبات POST في Angular2

عند محاولتك لإجراء طلب POST في Angular2، وجدت صعوبة في القيام بذلك، ولكن عند تغيير الطلبين إلى GET تعمل الأمور بشكل جيد. لذا، تتساءل إذا كان بإمكانك تكوين رأس الطلب بطريقة مختلفة لتمكين إجراء الطلب POST بنجاح.

في العميل، تستخدم كود مشابه لهذا:

typescriptCopy code
let headers = new Headers(); 
headers.append('Content-Type', 'application/json')
let body = latitude+','+longitude ; 

this.http.post('/api/SampleData/CurrentForecasts',body, { headers: headers })
.map(response => response.json())
.subscribe(
    data =>  this.Debug(data),
    err =>  console.log("Error: \n"+err),
    () => console.log('Get Complete')
); 

وفي الخادم، تقوم بمعالجة الطلب POST باستخدام الكود التالي:

csharpCopy code
[HttpPost]
public async Task CurrentForecasts(string location)
{
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(" https://api.forecast.io/");
        client.DefaultRequestHeaders.Accept.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

        // HTTP GET
        HttpResponseMessage response = await client.GetAsync("forecast/APIKEY/"+location);
        if (response.IsSuccessStatusCode)
        {
            var forecast = await response.Content.ReadAsStringAsync();
            return Content(forecast, "application/json");
        }
    }
    return Json("Failed"); 
}

المشكلة هنا تكمن في كيفية إرسال البيانات من العميل إلى الخادم في طلب POST. في العميل، أنت ترسل بيانات الجسم كسلسلة نصية ولكن في الخادم، تتوقع استلام معلمة location كجزء من مسار URL، ولكن لا تتوفر في طلب POST.

لحل هذه المشكلة، يمكنك تعديل العميل ليُرسل البيانات ككائن JSON بدلاً من سلسلة نصية. يُمكنك تعديل الكود على النحو التالي:

typescriptCopy code
let headers = new Headers(); 
headers.append('Content-Type', 'application/json')
let body = { location: latitude + ',' + longitude }; // تحويل البيانات إلى كائن JSON

this.http.post('/api/SampleData/CurrentForecasts', body, { headers: headers })
    .map(response => response.json())
    .subscribe(
        data => this.Debug(data),
        err => console.log("Error: \n" + err),
        () => console.log('Post Complete')
    ); 

وبعد ذلك، في الخادم، قم بتعديل الطريقة لتقبل البيانات ككائن JSON:

csharpCopy code
[HttpPost]
public async Task CurrentForecasts([FromBody] JObject data)
{
    if (data != null)
    {
        string location = data["location"].ToString();
        // قم بمعالجة بقية الكود هنا
    }
    return Json("Failed"); 
}

بهذه الطريقة، يمكنك الآن إرسال البيانات ككائن JSON من العميل إلى الخادم بنجاح في طلب POST.

بالطبع، دعوني أوضح المزيد من المعلومات لمساعدتك في فهم المشكلة وحلها بشكل أفضل.

عند إرسال طلب POST في Angular2، يجب عليك تأكيد أن بيانات الجسم (Body) التي ترسلها من العميل إلى الخادم تكون بالصيغة المناسبة. في الكود الذي قدمته، قمت بإعداد بيانات الجسم كسلسلة نصية latitude+','+longitude، وهذا ليس بالشكل الذي يتوقعه الخادم.

عندما تقوم بتغيير الطلب إلى GET، فإنك تقوم بإرسال البيانات كجزء من مسار URL، وهذا يعمل بشكل صحيح لأن الخادم يستلم البيانات من العنوان URL مباشرة.

ومع طلب POST، يتوقع الخادم استلام البيانات في الجسم (Body) للطلب، ولذا يجب عليك تنسيق البيانات بالطريقة المناسبة لكي يتم قراءتها بشكل صحيح.

لحل المشكلة، يجب عليك تعديل العميل ليُرسل البيانات ككائن JSON بدلاً من سلسلة نصية، ثم تعديل الخادم ليستقبل هذه البيانات ككائن JSON ويقوم بمعالجتها بشكل مناسب.

هذه الخطوات ستساعد في ضمان توافق العميل والخادم ونجاح إرسال الطلب POST بنجاح واستقبال البيانات بشكل صحيح.