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

背景:
前端服务运行在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,是什么原因?

阅读 234
评论 更新于 3月26日
    3 个回答

    这些代码看不出问题吧

    评论 赞赏 3月26日
      评论 赞赏 3月26日

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

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

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

        比如:

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

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

        评论 赞赏 3月26日
          撰写回答

          登录后参与交流、获取后续更新提醒