vue-resource ajax post request from domain -> subdomain

Hi everyone,

i'm having trouble when trying to make a CORS request from domain.com -> api.domain.com with vue resource: more precisely cookies are not sent. The api.domain.com uses a custom authentication guard that requires a JWT token - that can be sent via a parameter in URL (i've managed to get it work by using this approach) but also knows to look for a specific cookie that contains the token value.

To ease the front-end development i would prefer the 2nd option, by using the cookie - it would spear me to always having to append a variable to the requested API url.

PS: the cookies are httpOnly generated for any subdomain ( .domain.com)

stefanX201

9 years ago

Level 12

If you are using Laravel then edit your session.php and set

domain' => ".domain.dev" // the domain.dev and all subdomains

    <?php

    namespace App\Http\Middleware;
    
    use Closure;
    
    class Cors
    {
        public function handle($request, Closure $next)
        {
            if ($request->is('api/*')) {
                return $next($request)
                    ->header('Access-Control-Allow-Origin', 'http://subdomain.domain.dev')
                    ->header('Access-Control-Allow-Credentials', 'true')
                    ->header('Access-Control-Allow-Methods', 'GET, POST');
            }
            return $next($request);
        }
    }

if you using vue reseouce you need to set:

Vue.http.options.credentials = true;

With jquery the request should look like:

    $.ajax({
      type : "GET",
      url : 'http://domain.dev/api/users',
      async: false,
      xhrFields: {
        withCredentials: true
      },
      success : function(data, textStatus, xmLHttpRequest){
        console.log(data);
      }
    });

Please or to participate in this conversation.