美文网首页我爱编程
跨域ajax携带cookie

跨域ajax携带cookie

作者: forever_youyou | 来源:发表于2018-05-25 11:05 被阅读0次

最近在使用 laravel 开发时碰到了需要在跨域ajax请求中携带cookie的需求,参考
Laravel开启跨域请求跨域Ajax请求时是否带Cookie的设置

laravel
执行命令:php artisan make:middleware Cors,在/app/Http/Middleware/ 目录下会出现一个Cors.php 文件,在其handle 方法中加入如下内容:

// Cors.php
$response = $next($request);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept, multipart/form-data, application/json');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
$response->header('Access-Control-Allow-Credentials', 'false');
return $response;

完整Cors文件:

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $origin = $request->server('HTTP_ORIGIN') ?: '';
        $allow_origin = [
            'http://localhost:3000',
            'https://www.xxx.com',
        ];
        if (in_array($origin, $allow_origin)) {
            $response->header('Access-Control-Allow-Origin', $origin);
            $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept, Authorization');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS, DELETE');
            $response->header('Access-Control-Allow-Credentials', 'true');
        }
        return $response;
    }
}

其中有以下需要注意的地方:

  • 对于跨域访问并需要伴随认证信息的请求,需要在 XMLHttpRequest 实例中指定 withCredentials 为 true(具体见下方jQuery ajax部分)
  • 这个中间件你可以根据自己的需求进行构建,如果需要在请求中伴随认证信息(包含 cookie,session)那么你就需要指定 Access-Control-Allow-Credentialstrue, 因为对于预请求来说如果你未指定该响应头,那么浏览器会直接忽略该响应。
  • 在响应中指定 Access-Control-Allow-Credentialstrue 时,Access-Control-Allow-Origin 不能指定为 *(这个一定要注意,我就是在这个地方调了好久)
  • 后置中间件只有在正常响应时才会被追加响应头,而如果出现异常,这时响应是不会经过中间件的。
// jQuery ajax
$.ajax({
        url : 'http://remote.domain.com/corsrequest',
        data : data,
        dataType: 'json',
        type : 'POST',
        xhrFields: {
            withCredentials: true // 发送Ajax时,Request header中会带上 Cookie 信息。
        },
        crossDomain: true, // 发送Ajax时,Request header 中会包含跨域的额外信息,但不会含cookie
        contentType: "application/json",
        ...

相关文章

  • Ajax跨域

    CORS Ajax跨域不携带COOKIE PHP jQuery

  • 跨域ajax携带cookie

    最近在使用 laravel 开发时碰到了需要在跨域ajax请求中携带cookie的需求,参考Laravel开启跨域...

  • ajax、fetch 跨域携带cookie

    一、ajax 跨域携带cookie 原生ajax请求方式: jquery的post方法请求: 服务器端设置: 二、...

  • ajax 跨域携带COOKIE

    背景:项目中用pdf.js插件打开pdf流文档 遇到问题如下:在PC浏览器中通过插件打开pdf流文件,cookie...

  • SpringBoot+Vue数据交互

    后端框架Spring Boot,前端框架vue 1. 跨域+携带cookie 跨域-携带cookie 2. 拦截器...

  • AJAX 请求网络

    一、引入jquery文件 二、请求方式 三、解决跨域访问 四、请求时携带cookie 五、AJAX跳转页面 六、跳...

  • Ajax跨域请求携带cookie问题

    在跨域的请求中,请求不会自动带上cookie,需要前后端配合设置才可以。主要是以下几点: 服务端需要设置Acces...

  • cookie 跨域访问的解决方案

    资料: 理解Cookie和Session机制 Ajax跨域请求中的Cookie问题(默认不带cookie等凭证) ...

  • Spring Session 每次访问服务器SESSIONID

    响应Cookie默认返回 SameSite=Lax 作用:不能携带cookie进行跨域post访问 所以导致 浏...

  • 知识点---不定时更新

    cookie\session\localstorage跨域webpack手写ajax手写bind排序算法css常用...

网友评论

    本文标题:跨域ajax携带cookie

    本文链接:https://www.haomeiwen.com/subject/umyyjftx.html