AJAX send post request REST API (Provisional headers are shown)

Question

I'm trying to send post request data to my api.

The api works fine in my postman,

But in my laravel project, I'm getting the caution like this

Provisional headers are shown

API to Send Post Request Data

url: https://api.mydomain.com/api/login

{ "companyID":"2018-101", "password":"123456" }

Content-Type : application/json

Accept : application/json

In my Laravel project here's my ajax that performs the sending of post data to the api.

$.ajax({
      headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url: "https://api.mydomain.com/api/login",
      method: "POST",
      data:{
           companyID:"2018-101",
           password:"123456"
      }, 
      dataType: "json",
      success:function(data)
      {
           alert("Successfully Login!");
      },
      error: function(xhr, ajaxOptions, thrownError){
      console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
});

Here's my Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
/**
 * Handle an incoming request.
 *a
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */

 public function handle($request, Closure $next) {

    return $next($request)
      ->header('Access-Control-Allow-Origin', '*')
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
      ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
      ->header('Access-Control-Allow-Credentials',' true');
    }
   }

My Kernel.php

\App\Http\Middleware\Cors::class,

UPDATED

Tried to change the

data:{ companyID:"2018-101", password:"123456" },

to

data: JSON.stringify({ "companyID": "2018-101", "password" : "123456" }),

contentType: "application/json",

Have you tried in different browser? Could be some extension blocking it. — rits, Aug 19 '19 at 06:49
For starters, your _"API to Send Post Request Data"_ part shows the request payload as JSON but your jQuery code is sending an `application/x-www-form-urlencoded` request body. What format are you posting with Postman? — Phil, Aug 19 '19 at 06:50
Im using application/json format when sending a request in my postman this is my sample json format that I'm sending to my postman `{ "companyID":"2018-101", "password":"123456" }` — King RG, Aug 19 '19 at 06:52
Does this help ~ [jQuery posting JSON](https://stackoverflow.com/questions/5570747/jquery-posting-json)? — Phil, Aug 19 '19 at 06:53
What is the actual error? Nothing in this question shows an error message. What is the response from the request? — Phil, Aug 19 '19 at 06:59
`data: JSON.stringify({ "companyID": "2018-101", "password" : "123456" })` this is what I tried to your link. But I'm getting `Unexpected Identifier` in my `success:function(data)` — King RG, Aug 19 '19 at 07:03
I don't get any error except the caution shown to me `Provisional headers are shown` when I try to bring back the codes of `data:{ companyID:"2018-101", password:"123456" }, ` — King RG, Aug 19 '19 at 07:09
Please [update the code in your question](https://stackoverflow.com/posts/57551619/edit) to match what you currently have. Please also include any error messages reported **in full**, including the location within your scripts that caused the error. Take a screenshot of your browser console if you think it will help — Phil, Aug 19 '19 at 07:13
Did you add the correct `contentType` as per the [linked StackOverflow post](https://stackoverflow.com/a/13204514/283366)? — Phil, Aug 19 '19 at 07:20
Is that necessary? I have the Cors.php. Where can I place the `contentType` ? — King RG, Aug 19 '19 at 07:22

score 1 · Answer 1 · answered Aug 19 '19 at 07:54

Remove the headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

 $.ajax({
       url: "https://api.mydomain.com/api/login",
       method: "POST",
       data:{ companyID:"2018-101", password:"123456" }, 
       dataType: "json",
       success:function(data)
       {
            alert(data.data.access_token);
       },
       error: function(xhr, ajaxOptions, thrownError){
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
       });

AJAX send post request REST API (Provisional headers are shown)

1 Answers1