Hej Hej zusammen
Wahrscheinlich stehe ich gerade vor einem grossen Brett aber ich verzweifle gerade an CORS.
Folgendes Szenario:
Auf der Domain A: läuft ein NuxtJS Frontend mit dem Axios Modul. Dort möchte ich nach dem Absenden eines Formulars einen Ajax Request an die Domain B machen.
Auf Domain B läuft eine aktuelle WordPress Instanz die das ganze dann verarbeiten soll.
So sieht die Anfrage in Nuxt aus:
Der AJAX Import am Anfang der Domain sieht folgendermassen aus:
Auf Seite WordPress sieht die Verarbeitung des Ajax Calls folgendermassen aus:
Das Problem das ich habe, ich bekomme immer CORS Errors (siehe Ausgabe). Obwohl ich die Header meiner Ansicht nach richtig gesetzt habe.
Ausgabe Browser Konsole nach dem man das Formular absendet:
Die Frage ist, wo ist mein Denkfehler? Ich kann auf Wunsch per PN gerne die Domains rausgeben, falls das jemand in einem Browser unter echten Bedingungen Debuggen will, ich schick die dann gerne per PN.
Wahrscheinlich stehe ich gerade vor einem grossen Brett aber ich verzweifle gerade an CORS.
Folgendes Szenario:
Auf der Domain A: läuft ein NuxtJS Frontend mit dem Axios Modul. Dort möchte ich nach dem Absenden eines Formulars einen Ajax Request an die Domain B machen.
Auf Domain B läuft eine aktuelle WordPress Instanz die das ganze dann verarbeiten soll.
So sieht die Anfrage in Nuxt aus:
Javascript:
import AJAX from '../ajax';
export default {
methods: {
async submit_contact_form(event) {
event.preventDefault();
console.log('Formular absenden');
/* Ajax Call starten */
var ajax_send_datas = new FormData();
ajax_send_datas.append('action', 'sw_send_contactform_mail_ajax');
ajax_send_datas.append('fname', 'Vorname Test');
ajax_send_datas.append('lname', 'Nachname Test');
ajax_send_datas.append('contactmail', 'mail@mail.ch');
ajax_send_datas.append('message', 'Die Nachricht');
try {
const result = await AJAX.post( '', ajax_send_datas );
console.log( result );
} catch( error ) {
if ( error.response ) {
console.log('Fehler 1');
console.log( error.response.data );
console.log( error.response.status );
console.log( error.response.headers );
this.$root.$emit('bv::show::modal', 'modal_scripterror');
} else if ( error.request ) {
console.log('Fehler 2')
console.log( error.request );
this.$root.$emit('bv::show::modal', 'modal_scripterror');
} else {
// Something happened in setting up the request that triggered an Error
console.log('Fehler 3')
console.log( 'Error', error.message );
this.$root.$emit('bv::show::modal', 'modal_scripterror');
}
console.log( error.config );
this.$root.$emit('bv::show::modal', 'modal_scripterror');
}
}
},
mounted () {
/* Add Event Listener für Kontaktformular */
var contact_form = document.getElementById('contactForm');
contact_form.addEventListener('submit', this.submit_contact_form);
},
destroyed () {
var contact_form = document.getElementById('contactForm');
contact_form.removeEventListener('submit', this.submit_contact_form);
}
}Der AJAX Import am Anfang der Domain sieht folgendermassen aus:
Javascript:
import axios from 'axios';
export default axios.create({
baseURL: 'https://domainb.ch/wp-admin/admin-ajax.php',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
},
credentials: false
});Auf Seite WordPress sieht die Verarbeitung des Ajax Calls folgendermassen aus:
PHP:
/* E-Mail vom Kontaktformular versenden */
function sw_send_contactform_mail_ajax() {
//Header erlaubt Anfragen von externen Domains
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Authorization, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Credentials: true');
/* Übergebene Variabeln validieren */
$firstname = esc_attr( $_POST['fname'] );
$lastname = esc_attr( $_POST['lname'] );
$frommail = esc_attr( $_POST['contactmail'] );
$message_raw = esc_attr( $_POST['message'] );
/* Nachricht vorbereiten */
$message = 'Absender: '.$firstname.' '.$lastname."\r\n\r\n";
$message .= 'E-Mail Adresse: '.$frommail."\r\n\r\n\r\n";
$message .= "Nachrichteninhalt:\r\n\r\n";
$message .= $message_raw;
/* E-Mail Header aufbereiten */
$headers = array();
$headers[] = 'From: Name <name@mail.ch>';
$headers[] = 'Reply-To: '.$firstname.' '.$lastname.' <'.$frommail.'>';
/* Mail versenden */
wp_mail('send@mail.ch', 'Neues Kontaktformular', $message, $headers);
/* Return Array zurückgeben */
$return_array = array(
'status' => 200
);
echo json_encode($return_array);
exit();
}
add_action( 'wp_ajax_nopriv_sw_send_contactform_mail_ajax', 'sw_send_contactform_mail_ajax' );
add_action( 'wp_ajax_sw_send_contactform_mail_ajax', 'sw_send_contactform_mail_ajax' );Das Problem das ich habe, ich bekomme immer CORS Errors (siehe Ausgabe). Obwohl ich die Header meiner Ansicht nach richtig gesetzt habe.
Ausgabe Browser Konsole nach dem man das Formular absendet:
Code:
Formular absenden faq.vue:73
XHROPTIONShttps://.../wp-admin/admin-ajax.php
CORS Preflight Did Not Succeed
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://.../wp-admin/admin-ajax.php. (Grund: CORS-Preflight-Antwort schlug fehl).
Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://.../wp-admin/admin-ajax.php. (Grund: CORS-Anfrage schlug fehl).
XHRPOSThttps://.../wp-admin/admin-ajax.php
Fehler 2 faq.vue:98Die Frage ist, wo ist mein Denkfehler? Ich kann auf Wunsch per PN gerne die Domains rausgeben, falls das jemand in einem Browser unter echten Bedingungen Debuggen will, ich schick die dann gerne per PN.
Zuletzt bearbeitet:
(Kommentare entfernt für bessere Lesbarkeit)
und gestern offenbar vergessen ^^