1

vue+axios frontend doesn't send cookie to my php server in request header.

I'm trying to move an old project to a new server. I did some optimize to the project architecture and it works perfectly fine in my local docker environment. There's some problem happened when I moved it to the production environment. There are two domains for each side. admin.example.com for frontend and serve.example.com for backend. I manually set the cookie_path to / and cookie_domain to .example.com in server code. Frontend got an expected set-cookie in backend response header. But frontend won't send cookie to backend in every next request. So the login status couldn't maintain.

const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 15000,
  withCredentials: true,
  transformRequest: [function (data) {
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// code
session_set_cookie_params(
            C('COOKIE_EXPIRE'),
            C('COOKIE_PATH'),
            C('COOKIE_DOMAIN'),
            C('COOKIE_SECURE'),
            C('COOKIE_HTTPONLY')
);
session_name(C('SESSION_NAME'));

// config

'SESSION_NAME'          => 'xxxxx',

'COOKIE_EXPIRE'         =>  3600,
'COOKIE_DOMAIN'         =>  '.example.com',
'COOKIE_PATH'           =>  '/',
'COOKIE_PREFIX'         =>  '',
'COOKIE_SECURE'         =>  false,
'COOKIE_HTTPONLY'       =>  false,

response header like below:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:DNT,X-Token,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding
Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE
Access-Control-Allow-Origin:http://admin.example.com
Set-Cookie:beb257200166c10f69c4667d621785f7=9m7e9lonmjtvh06fn3fi0nul71; expires=Thu, 08-Aug-2019 13:29:29 GMT; Max-Age=3600; path=/; domain=.example.com
X-Content-Type-Options:nosniff

Expected result: Browser send cookie in each request so the login status could be maintained.

Actual result: Cookie hasn't be sent. Browser got different session key in each request.

Oliver Nybo
  • 560
  • 1
  • 6
  • 24
Frank Lee
  • 11
  • 1
  • It seems vue doesn't accept the cookie respond from backend. – Frank Lee Aug 08 '19 at 12:50
  • You "can't" send the cookie, you need to send the content of the cookie, via a `POST` or `GET` request. On the PHP side, your receive the data via `$_GET` or `$_POST`, then you can set the values to `$_COOKIE`. – Anuga Aug 08 '19 at 13:23

1 Answers1

0

I just found out that I make a stupid mistake last night. My friend and I are working together with this project. He deployed his frontend code on our frontend server. That's why the browser never send cookie to backend in request header, no matter what I did in both frontend and backend side. You only need to do two things under this circumstances.

  1. Send "Access-Control-Allow-Credentials:true" and "Access-Control-Allow-Origin:frontend_domain" in your backend response header. Note that Access-Control-Allow-Origin is not allowed to be set to * under this circumstances.

  2. Set "withCredentials:true" in your axios configure. The default value for this key is false. This is the setting to enable axios send cookie in cors request. You can get more information here

Frank Lee
  • 11
  • 1