Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

socieboy's avatar

I notice that but I want to let this for a second choise if I can't make it work directly from the browser to the API

YanTao's avatar

how to solve it??I have the same problem

larschinkel's avatar

This is how I fixed it

In Vue.js I added this http option:

Vue.http.options.emulateJSON = true

In PHP I added these headers:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
header('Access-Control-Allow-Methods: GET, POST, PUT');
julesbloemen's avatar

I have the same issue. Tried lots of things. The following ajax calls works fine:

$.ajax({
            url: 'https://openiban.com/validate/DE89370400440532013000',    
            data: { // pass additional options
                "validateBankCode": true,   // (not guaranteed)
                "getBIC": true          // (not guaranteed)
            },
            success: function (data) {
                console.log(data);
            },
            error: function (xhr) {
                return xhr;
                // handle error
            }
        });

But when create a vue resource route. I get the following error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

validateIban: function (){
                this.$http.get('https://openiban.com/validate/RANDOMIBAN?getBIC=true&validateBankCode=true')
                    .then(function (response) {

                    console.log(response)

                }, function (error) {
                    this.error = error.data;
                    console.log(error.data);
                });
            },
julesbloemen's avatar

Wel I have found the solution. Seems the preflight message was caused by Echo (Broadcast) which was appending a Pusher token every request.. This openiban validator did not like that.

Solution:

Vue.http.interceptors.push(function (request, next) {

    //some api's dont like the X-CSFR-token or Pusher token.. remove it..
    const removeAuthHeaders = request.url.includes("openiban.com");

    request.headers['Access-Control-Allow-Origin'] = '*';

    if (removeAuthHeaders){
        request.headers.delete('Access-Control-Request-Headers')
        request.headers.delete('X-Socket-ID');

    }
    else {
        request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
    }
    next();
});
Previous

Please or to participate in this conversation.