Axios ajax call not working working on chrome but working safari

change from put to post / patch, I'm pretty sure safari has restrictions with put.

// Route
Route::patch(...);


// Call
axios.patch(...)

I can't even understand your post title

what not to understand ???? same function above is working on chrome and but its giving issue on safari

i tried patch and post and get but still getting same error, as per example above it looks like the validation method is throwing exception because the required data values are empty.

if i tried this on chrome the function is working just fine and i can see the changes on the front end page.

Any further ideas on how to solve this issue ???

@nhayder Your title says NOT working on Chrome, NOT working on Safari... basically just not working.

@sergiu17 is correct. This is very confusing.

ok, the title is changed

@nhayder This HAS to be a cache busting issue. Are you using Laravel Mix to cache bust your javascript files?

If not, you should be. Otherwise your javascript is being cached in Safari and not updated.

To test this theory, open a private window in Safari and try again. If it works... you need to implement cachebusting.

https://laravel.com/docs/6.x/mix#versioning-and-cache-busting

@fylzero yes i'm using laravel mix and it's not a caching issue, I cleared it almost every time i make a change in the code

@nhayder Did you try a private window in Safari? Sometimes clearing the cache doesn't fully clear the cache in the way you would expect. The fact that Chrome has 3 different methods of clearing the cache is evidence of this.

yes its same error every where

@nhayder Just for the sake of argument... try this...

async saveText({commit}, [id, text, name, wIndex]){

            $ajaxUrl = '/admin/designer/api/widget/text' + '?nocache=' + new Date().getTime();

            await axios.put($ajaxUrl, {

@nhayder I also just read an article that says sometimes Safari won't work unless you add a slash at the end of your url...

Try this as well...

await axios.put('/admin/designer/api/widget/text/', {

Sounds silly but worth a try.

@nhayder Try hard coding the values... see if it passes...

            await axios.put('/admin/designer/api/widget/text', {

                elem: 'some text here',

                elemName : 'some name here',

                elemId: 3,

            })

This will at least tell you if the issue is on the passing side or the receiving side.

@fylzero i will try doing all these and let you know, but it looks like axios on safari is submitting empty arrray??? so the validation on the controller method is throwing the error.

but the function is fully working on safari, This is really strange.

@fylzero i tried all of the solutions you recommended but none of them fixed the problem

@nhayder Have you actually been trying to figure this out for 5 months!?!?!

https://laracasts.com/discuss/channels/laravel/axios-ajax-call-not-working-on-safari

@nhayder try to completely simplify the function... see if this works. Just as a test...

saveText(){
 
   axios.put('/admin/designer/api/widget/text', 
    {
                elem: 'testing',
                elemName : 'testing',
                elemId: 1,
    });

},

@fylzero yes, i had same issue with another app that i was working on.

@fylzero by hardcoding the values like that

            await axios.put('/admin/designer/api/widget/text', {

                elem: 'some text here',

                elemName : 'some name here',

                elemId: 3,

            })

On the controller endpoint i'm checking if i'm receiving any data form axios before validation like this

    public function updatewidgettext(Request $request)
    {
    return $request; // <--- this

        $request->validate([

            'elem' => 'required|string',

            'elemName' => 'required|string',

            'elemId' => 'required|integer'

        ]);

        $name = $request['elemName'];

        $elemId = $request['elemId'];

        $elemText = trim($request['elem']);

        $updateWidget = Widget::findOrFail($elemId);
        
        $updateWidget->$name = Purifier::clean($request['elem'], 'designer');

        $updateWidget->save();
                
    }

And this is the result i'm getting when using safari

[ ] // empty 

so as a conclusion axios is not functioning as it should and the data are not being passed to laravel controller as we expected, But instead laravel is throwing validation error because no data has been received.

@nhayder what about sharing your route file, as to me it sounds like you are not hitting this action at all. You are trying to return $request object, which will never be an []. If you did $request->all() then you might get [].

@nakov He is claiming it is giving the validation error at the bottom of his original post. So it sounds like it is hitting the endpoint. Also claims it works on Chrome but not Safari.

At this point I'm guessing it is something about the way he has Axios installed? Maybe?

@nhayder What happens if you just use axios.post instead of using put? Make sure to change your route to accept post and stick with the simple test example.

If that works... I'd just make it a post for now... then do some bench testing with a fresh copy of Laravel to figure out what is off about your setup.

@nakov please read the hall conversation the

return $request;

was temperary just to check if i'm getting any data from axios.

you can read my initial post for permanent code as i have it on my app

@fylzero i'm hitting that end point in chrome ?????

NOT SAFAR ???

the code is fully working on chrome and firefox

@nhayder I've read the whole conversation.

@fylzero he said that using this:

public function updatewidgettext(Request $request)
    {
    return $request; // <--- this

the result is [] it cannot be true.

@nakov this line

return $request;

was removed from the code, it was just for testing.

it's not there anymore i was explaining how things work

@nhayder That should be $request->all() as @nakov said... and what are you talking about!?!

I said...

Also claims it works on Chrome but not Safari.

You replied...

i'm hitting that end point in chrome ???? NOT SAFAR ??? the code is fully working on chrome and firefox

What the hell is different between these?

@fylzero yes tried them all , patch, post, put, all of the as passing empty array on safari but they work as they should be on chrome

@nhayder Try a post instead of put as I suggested and let me know the result.

saveText(){
 
   axios.post('/admin/designer/api/widget/text', 
    {
                elem: 'testing',
                elemName : 'testing',
                elemId: 1,
    });

},

return $request->all():

Route::post('/admin/designer/api/widget/text', 'YourController@yourMethod');

@nhayder I am not saying it still stays there, I am just saying the when using return $request; the response will NEVER BE [] it will be an instance of the Request object..

Now as you say it does not work.. Have you checked the Network tab in your Safari browser?

When you hit the route, inspect the Network tab, and make sure that the params are passed to the correct endpoint.

@nakov this is what is showing on the network tab when hitting the route

{
    "message": "The given data was invalid.",
    "errors": {
        "elem": [
            " field elem required."
        ],
        "elemName": [
            " field elem name required."
        ],
        "elemId": [
            " field elem id required."
        ]
    }
}