Verzweiflung bei Axios, Ajax, WordPress und Cors

[kim88]

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:

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:

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:

/* 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:

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:98

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.

 

[Madman1209]

Hi,

Das Problem das ich habe, ich bekomme immer CORS Errors (siehe Ausgabe). Obwohl ich die Header meiner Ansicht nach richtig gesetzt habe.

wie genau hast du die Header gesetzt? Wird auf beiden ein Apache verwendet?

VG,
Mad

 

[kim88]

Läuft auf beiden Apache:

Der Header ist gesetzt mit:

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');

in der PHP Datei. Zusätzlich ist auf Domain B noch folgendes in der .htaccess

Header set Access-Control-Allow-Origin "*"

 

[netzgestaltung]

Was ist mit WP Nonce? Den hab ich jetzt nicht gesehn. Geht admin-ajax überhaupt noch ohne?

Bei einem Bilder-up/download Server den ich vor kurzem mal gemacht habe hab ich das in die htaccess eingetragen:

  Header set Access-Control-Allow-Origin: https://meine-erlaubte-domain.com
  Header set Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
  Header set Access-Control-Allow-Headers: *

Gelernt hab ich damals das nur JSON CORS Requests vom Browser (FF) durchgelassen werden also ev mal mit json_encode() durchschicken?

Die PHP header könnten in der Antwortfunktion zu spät sein? Bei einem weiteren anderen Projekt (HSTS Header gingen nicht in htaccess wegen FastCGI) habe ich gelesen man würde am besten eine PHP-Vorschaltdatei vor dem Aufruf von WP bauen damit dann die Header schon passen.

Abgesehen von der Browserkonsole, gibts es eine Serverantwort? (ok warscheinlich nicht)

 

[kim88]

Das Problem hat sich erledigt.

Danke für den entsprechend Hinweis.

Gelernt hab ich damals das nur JSON CORS Requests vom Browser (FF) durchgelassen werden also ev mal mit json_encode() durchschicken?

Das hab ich auch mal gelernt und gestern offenbar vergessen ^^