Why is the vue+axios frontend not sending cookies to my php server in the request header?
I am currently in the process of migrating an old project to a new server. After making some optimizations to the project architecture, everything worked perfectly fine in my local docker environment. However, upon moving it to the production environment, I encountered some issues. The project has two separate domains for each side - admin.example.com for the frontend and serve.example.com for the backend. I have manually set the cookie_path to / and cookie_domain to .example.com in the server code. Even though the frontend receives an expected set-cookie in the backend response header, it fails to send the cookie to the backend in subsequent requests. As a result, the login status cannot be maintained.
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'
}
})
// PHP 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'));
// PHP config
'SESSION_NAME' => 'xxxxx',
'COOKIE_EXPIRE' => 3600,
'COOKIE_DOMAIN' => '.example.com',
'COOKIE_PATH' => '/',
'COOKIE_PREFIX' => '',
'COOKIE_SECURE' => false,
'COOKIE_HTTPONLY' => false,
The response header appears as follows:
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 Outcome: The browser should send the cookie in each request in order to maintain the login status.
Actual Outcome: The cookie is not being sent, resulting in the browser receiving a different session key with each request.