Laravel Forbidden Access when using Ajax

Question

I installed a fresh Laravel App with authentication. I am using laragon. The login, registration, reset password pages are working fine. I created a profile controller for the user to edit profile. However, when submitting the form through Ajax, it gives me a Forbidden - You don't have permission to access / / /profile/edit_profile on this server..

         class ProfileController extends Controller
            {
                //

                function index()
                {
                    return view('profile.index');
                }

                function edit_profile(Request $request)
                {
                    $txt_midname = $request->input('txt_midname');
                    $txt_firstname = $request->input('txt_firstname');
                    $txt_lastname = $request->input('txt_lastname');
                    $extname = $request->input('extname');
                    $user = Auth::user();
                    $user->firstname = $txt_firstname;
                    $user->midname = $txt_midname;
                    $user->lastname = $txt_lastname;
                    if ($user->save()) {
                        return 'ok';
                    }
                }

            }

Here is also the route:

Route::post('/profile/edit_profile', 'ProfileController@edit_profile')->name('edit_profile');

and the view:

            $('#btn_update').on('click', function() {
                var btn_text = $('#btn_update').text();
                var txt_firstname = $.trim($('#txt_firstname').val());
                var txt_midname = $.trim($('#txt_midname').val());
                var txt_lastname = $.trim($('#txt_lastname').val());
                var extname = $.trim($('#extname').val());

                $.post(baseUrl + '/profile/edit_profile', {
                    '_token': token,
                    'txt_midname': txt_midname,
                    'txt_firstname': txt_firstname,
                    'txt_lastname': txt_lastname,
                    'extname': extname
                }, function(data) {
                    if (data == 'ok') {
                        window.location.reload();
                    }
                })
            })

Potato Science · Accepted Answer · 2020-06-16 07:32:46Z

1

You need to inject the csrf token to your request.

$.post({
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  },
  url: '/admin/gallery/create/ajax',
  data: {}, 
  method: 'POST',
  success: function(response) {
  },
  error: function(error) {
  }
})

or if you want every ajax request inject the csrf token you can do this as well.

$.ajaxSetup({
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});

answered Jun 16, 2020 at 7:32

Potato Science

6024 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

beginner · Accepted Answer · 2020-06-17 03:16:15Z

0

It was my mistake. The problem is with my baseUrl in javascript. It should be var baseUrl = "{{url('')}}";instead of var baseUrl = '{{url('')}}';

answered Jun 17, 2020 at 3:16

beginner

2,0325 gold badges46 silver badges81 bronze badges

Collectives™ on Stack Overflow

Laravel Forbidden Access when using Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related