php – mengapa panggilan balik ajax ini ke titik akhir REST masih diblokir oleh ‘nosniff’ karena ketidakcocokan tipe MIME (“application/json”)?

saya menjalankan WP di server nginx

saya telah menyiapkan titik akhir istirahat, yang ditargetkan dalam panggilan balik ajax

jika saya mengaktifkan ‘nosniff’ khas XCTO,

more_set_headers   "X-Content-Type-Options: nosniff";

di konfigurasi server, itu memblokir

"due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff)"

jika saya menghapus header XCTO, masalahnya hilang

saya melewatkan konten yang tidak diketik dengan benar di halaman saya

dengan templat ini,

<?php

function MY_login_ajax_action_callback( $request ){
    $response = array(
        'data'  => 'success',
        'supplemental' => array(
            'message' => 'success'
        )
    ) ;
    $response = serialize($response);
    header('Content-Type: text/javascript; charset=utf-8');
    $response = json_encode($response);

    return rest_ensure_response( $response );
}
add_action(
    'rest_api_init',
    function () {
        register_rest_route(
            'test-rest/v1',
            '/verify/',
            array(
                'methods'  => 'POST',
                'callback' => 'my_ajax_action_callback'
            )
        );
    }
);

function add_footer_js() {
    $myAjaxData = [
        'root'            => esc_url_raw( rest_url() ),
        'route'           => 'test-rest/v1/verify/',
        'nonce'           => wp_create_nonce( 'wp_rest' ),
        'success'         => 'success!',
        'failure'         => 'failure!',
        'app_usr'         => MY_APP_USR,
        'app_pwd_name'    => MY_APP_PWD_NAME,
        'app_pwd'         => MY_APP_PWD,
        'app_token'       => MY_APP_TOKEN,
    ];
?>

    <script type="application/json" id="myAjaxData" >
        <?php echo json_encode( $myAjaxData, JSON_UNESCAPED_SLASHES ) ?>
    </script>

    <script type="text/javascript">
        var myAjaxData = JSON.parse(document.getElementById('myAjaxData').textContent);
        console.log('myAjaxData:    ' + JSON.stringify(myAjaxData, null, "\t"));

    jQuery( "#myform" ).submit(function(e) {
        var myE = e;
        const mySubmitContinue="yes";
        if ( mySubmitContinue === 'no') {
            alert( "Handler for .submit() : HALT" );
            e.preventDefault();
        } else {
            alert( "Handler for .submit() : CONTINUE" );
        }
    });

    jQuery('#wp-submit').on('click', function(e) {
        var myE = e;
        var formData = jQuery('#myform').serializeArray();
        var data = {
            action: 'my_ajax_action',
            dataForPHP: formData
        };
        var myAjaxUrl = myAjaxData.root + myAjaxData.route;

        jQuery.ajax({

            url: myAjaxUrl,
            method: 'POST',
            dataType: 'jsonp',
            contentType: 'text/javascript; charset=UTF-8',

            async: false,
            data: data,
            cache: false,
            crossDomain: true,
            headers: {
                'Cache-Control': 'no-cache, no-store, must-reverify',
                'Pragma': 'no-cache',
                'Expires': '0'
            },
            beforeSend: function( xhr ) {
                xhr.overrideMimeType( "text/javascript; charset=UTF-8" );
                xhr.setRequestHeader('Authorization', 'Basic ' + myAjaxData.app_token);
            },
        })
        .done(function ( response ) {
            console.log( 'AJAX success:    ' + JSON.stringify(response, null, "\t") );
        })
        .fail(function ( response ) {
            console.log( 'AJAX error:      ' + JSON.stringify(response, null, "\t") );
        })
        .always(function( response ) {
            //
        });

    });
    </script>
<?php
    return;
}
add_action('wp_footer', 'add_footer_js' );

if ( ! is_user_logged_in() ) {
    $args = array (
        'form_id'        => 'myform',
        'redirect'       => home_url(),
        'label_username' => __( 'User: ' ),
        'label_password' => __( 'Pass: ' ),
        'label_log_in'   => __( 'LogIn' ),
        'remember'       => false,
        'value_remember' => false
    );
    wp_login_form( $args );
} else {
    nocache_headers();
    wp_safe_redirect( home_url() );
    exit();
}

sedang dimuat, di konsol

myAjaxData:    {
    "root": "https://example.com/wp-json/",
    "route": "my-rest/v1/verify/",
    "nonce": "abcde12345",
    "success": "success!",
    "failure": "failure!",
    "app_usr": "myadmin",
    "app_pwd_name": "my-login-rest-api",
    "app_pwd": "xxx...xxx",
    "app_token": "cfa...Cf="
}

lalu, di klik untuk mengirim, di konsol

The resource from “https://example.com/wp-json/my-rest/v1/verify/?callback=jQuery5640465132067422652_1679170534810&action=my_ajax_action&dataForPHP%5B0%5D%5Bname%5D=log&dataForPHP%5B0%5D%5Bvalue%5D=myadmin&dataForPHP%5B1%5D%5Bname%5D=pwd&dataForPHP%5B1%5D%5Bvalue%5D=yyy...yyy&dataForPHP%5B2%5D%5Bname%5D=redirect_to&dataForPHP%5B2%5D%5Bvalue%5D=https%3A%2F%2Fexample.com&_=1679170534811” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

AJAX error:      {
    "readyState": 4,
    "status": 404,
    "statusText": "error"
}

dan peringatan

"Handler for .submit() : CONTINUE"

apa yang diblokir? di suatu tempat di sana perlu spesifikasi konten lain. tapi apa dan dimana?