Having some problem on sending cookie to server

Question

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.

Answer 1

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