有哪位高手可以说明白跨域携带cookie？

Question

背景：
前端服务运行在localhost:8080
后端服务运行在127.0.0.1:8000

使用axios请求前已设置

axios.defaults.withCredentials = true

document.cookie = 'username=hello'

axios请求代码：

axios.post('/api/post', data, {
                    baseURL: 'http://127.0.0.1:8000', 
                })

后端已设置允许跨域

        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
        $allow_origin = [
            'http://localhost:8080',
        ];

        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
            $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
        }
        return $response;

但是在请求的时候，请求头里没有该cookie，是什么原因？

Answer 1

这些代码看不出问题吧

Answer 2

CSRF 攻击章节有代码示例 可以借鉴一下

Answer 3

跨域请求是没有办法发送cookie的，这是由于浏览器的安全设置造成的。无论代码写的有多正确，浏览器都会禁止这个行为，在发送的时候会过滤到指定的cookie数据。
如果想实际跨域发送cookie，可以将其放到自定义的header字段中。

另外：浏览器禁止这个行为是有原因的，cookie的传递仅限于同源。个人建议：

• 如果是前后台彻底分离，那么就用彻底分离的验证方式，使用auth-token来替换cookie。
• 如果是前台端分离开发，但却想使用cookie的认证机制，建立结合nginx在后台进行数据的转发。

比如：

axios.post('/api/post', data, {
                    baseURL: '', 
                })

把前台后数据发送到同一个源上，这样cookie也就自动发送到后台了。