Ошибка 403 ajax

I’m making a query to a web service using jQuery AJAX. My query looks like this:

var serviceEndpoint = 'http://example.com/object/details?version=1.1';
$.ajax({
  type: 'GET', 
  url: serviceEndpoint,
  dataType: 'jsonp',
  contentType: 'jsonp',
  headers: { 'api-key':'myKey' },
  success: onSuccess,
  error: onFailure
});

When I execute this, I get a status error of 403. I do not understand why my call results in having the status code 403. I’m in control of the security on my service and it is marked as wide-open. I know the key is valid, because I’m using it in another call, which works. Here is the call that works:

var endpoint = 'http://example.com/object/data/item?version=1.1';
$.ajax({ 
  type: 'POST', 
  url: endpoint, 
  cache: 'false',
  contentType:'application/json',
  headers: {
    'api-key':'myKey',
    'Content-Type':'application/json'
  },
  data: JSON.stringify({
    id: 5,
    count:true
  }),
  success: onDataSuccess,
  error: onDataFailure
});

I know these are two different endpoints. But I’m 100% convinced this is not a server-side authentication or permission error. Once again, everything is wide open on the server-side. Which implies that I’m making some mistake on my client-side request.

I feel I should communicate that this request is being made during development. So, I’m running this from http://localhost:3000. For that reason, I immediately assumed it was a CORS issue. But everything looks correct. The fact that my POST request works, but my GET doesn’t has me absolutely frustrated. Am I missing something? What could it be?

127.0.0.1:8000/post-1/like 403 (Forbidden)

$(function(){
			$('body').on('click', '.article-like', function(){
			if ($(this).hasClass('fancybox-login-popup')) {
			return false;
			}

			var entryId = parseInt($(this).attr('data-id'));
			var hash = $(this).attr('data-hash');
			var sign = parseInt($(this).attr('data-sign'));

			var rating = $(this).parent().children('b');

			$.post('{% url 'posts:add_like' pk=post.pk %}', { entryId: entryId, sign: sign, hash: hash }, function(data) {
			if (data.error === undefined) {
			if (data.likesCount > 0) {
			var t = '+' + data.likesCount;
			var c = "positive";
			} else if (data.likesCount < 0) {
			var t = '–' + Math.abs(data.likesCount);
			var c = "negative";
			} else {
			var t = '0';
			}

			if (sign === 1) {
			var v = "voted-positive";
			} else {
			var v = "voted-negative";
			}

			rating.text(t);
			rating.parent().removeClass("negative positive").addClass(c);
			rating.parent().removeClass("voted-negative voted-positive").addClass(v);
			} else {
			showTip(data.error, 'error');
			}
			}, 'json');

			return false;
			});

i have to create a specifif form ta register data into the database and send a mail without refreshing the page

so i create a script.js file :

    (function ($) {
    $(document).ready(function () {

        jQuery('form[name="form_result"]').on('submit', function() {
            var form_data = jQuery(this).serializeArray();
            console.log('hello');
            form_data.push({"name" : "security", "value" : ajax_nonce });
            console.log(form_data);
            // Here is the ajax petition
            jQuery.ajax({
                url : ajax_url,
                type : 'post',
                data : form_data,
                success : function( response ) {
                    // You can craft something here to handle the message return
                    alert(response);
                },
                fail : function( err ) {
                    alert("there was an error: " + err );
                }
            });
            // This return prevents the submit event to refresh the page.
            return false;
        });    
      });
})(jQuery);

in my function.php file i declare has follow :

function javascript_variables(){ ?>
    <script type="text/javascript">
        var ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
    </script><?php
}
add_action ( 'wp_head', 'javascript_variables' );


//AJAX REQUEST
function twentytwentychild_asset() {
    // ...
    wp_enqueue_script('jquery');

    // Charger notre script
    wp_enqueue_script(
        'twentytwentychild',
        get_stylesheet_directory_uri(). '/assets/js/script.js', 
        array('jquery'),
        '1.0', true
    );

    // Envoyer une variable de PHP à JS proprement
    wp_localize_script('twentytwentychild', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'twentytwentychild_asset');


add_action('wp_ajax_send_form', 'send_form'); // This is for authenticated users
add_action('wp_ajax_nopriv_send_form', 'send_form');

function send_form(){
    // This is a secure process to validate if this request comes from a valid source.
    check_ajax_referer( 'secure-nonce-name', 'security' );
 
    /**
     * First we make some validations, 
     * I think you are able to put better validations and sanitizations. =)
     */
     
    if ( empty( $_POST["name"] ) ) {
        echo "Insert your name please";
        wp_die();
    }
 
    if ( ! filter_var( $_POST["email"], FILTER_VALIDATE_EMAIL ) ) {
        echo 'Insert your email please';
        wp_die();
    }
 
    if ( empty( $_POST["fcPhone"] ) ) {
        echo "Insert your phone please";
        wp_die();
    }

    $to = 'test@gmail.com';

    $subject = 'Un potentiel consultant viens de faire une simulation!';

    $body  = 'From: ' . $_POST['name'] . 'n';
    $body .= 'Email: ' . $_POST['email'] . 'n';
    $body .= 'Message: ' . $_POST['fcPhone'] . 'n';

    $headers = array('Content-Type: text/html; charset=UTF-8');

    wp_mail( $to, $subject, $body, $headers );

    echo 'Done!';
    wp_die();
     
}

and my template page
it’s a simple form :

<form action="" method="post" name="form_result">
    <div id="simulation_form">
        <div style="margin-bottom: 2rem; display: flex;">
            <div class="vc_col-sm-4">
                <div class="simulation_form_q">Votre name:*</div>
                <div class="simulation_form_r">
                    <input type="text" id="name" name="name" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre email:*</div>
                <div class="simulation_form_r">
                    <input type="email" name="email" id="email" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre numero de telephone:*</div>
                <div class="simulation_form_r">
                    <input type="text" name="fcPhone" id="telephone" required>
                </div>
            </div>
        </div>

        <input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;"/>
        <div class="simulation_form_btn">
            <input type="submit" value="calculez vos revenus">
        </div>
    </div>
</form>

but when i send the Ajax request i have 403 error forbidden I don’t know why i clear the cache and the cookie i use console log to debug the ajax request and it send all the data yet i have still that 403 ERROR and i don’t know how to solve it