Cererea POST a punctului final al API-ului personalizat eșuează în React

voturi
16

Am un backend WordPress în care am adăugat propriile puncte de vedere personalizate la API:

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

Am setat mediul meu astfel: https://example.com este locul în care trăiește aplicația React, iar WordPress se află într-un subdirector, pe https://example.com/wp

Aplicația mea React face solicitări POST și GET la aceste puncte de mai sus. Am o variabilă de mediu de producție unde am setat adresa URL de bază a API-ului, care este https://example.com/wp/wp-json/game („jocul” este spațiul meu de nume) și, așadar, pot face solicitări cu Axios https://example.com/wp/wp-json/game/countries și https://example.com/wp/wp-json/game/check_answer și aici vine problema.

Serverul meu este configurat astfel încât să servească aplicația React atât cu cât și fără www . Așadar, https://example.com și https://www.example.com servesc ambele aceeași aplicație.

Dar acest lucru generează o problemă interesantă pentru obiectivele mele personalizate: cererea GET funcționează întotdeauna. dar cererea POST funcționează numai dacă o încerc de pe https://example.com , NU de la https://www.example.com . În ultimul caz, îmi arată doar o solicitare eșuată. Fără răspuns, nimic.

Am mers pe jos și pare să fie legat de CORS, dar nu am putut să-l repar. Aveți idei aici?

Întrebat 09/05/2020 la 11:32
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
0

În primul rând, aș dori să subliniez că dumneavoastră Get solicitările funcționează deoarece aparțin categoriei care nu declanșează o solicitare preflight. În timp ce al tău Post solicitarea utilizează probabil un antet care îl elimină din categorie, astfel încât să fie nevoie să treacă preflight. Dacă sunteți interesat să citiți mai multe, aici este link-ul de documentare.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

Acum, potrivit comentariului tău, eroarea pe care o primești este

Răspunsul la solicitarea preflight nu trece verificarea controlului accesului: Nu există antetul „Control-Acces-Permite-Origine” în resursa solicitată.

Metoda pe care o utilizați pentru setarea anteturilor, așa cum ați menționat într-un comentariu, nu funcționează la cererile de odihnă. Puteți utiliza funcția de mai jos în functions.php sau un fișier plugin la care să setați originea * .

function sr_rest_send_cors_headers( $value ) 
{   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;
}
add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

Deși recomand ceea ce face WordPress în mod implicit. Dacă verificați wp-includes/rest-api.php veți găsi funcția originală pe care am modificat-o pentru scopul dvs. Dacă sunteți interesat să aruncați o privire, aici este link-ul trac.

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574

Publicat 17/05/2020 la 10:38
sursa de către utilizator

voturi
0

Am găsit problema pe care trebuie să o eliminați din adresa dvs. URL wp și ar trebui să funcționeze. De exemplu:

https://example.com/wp/wp-json/game/countries

Ar trebui să fie:

https://example.com/wp-json/game/countries

De asemenea, puteți verifica acest tutorial . Sper că te ajută.

Publicat 14/05/2020 la 09:23
sursa de către utilizator

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more