• 允许跨域资源共享(CORS)携带 Cookie (转载)


    如何让CORS携带Cookie


    CORS 是一个 W3C 标准,全称是“跨域资源共享”(Cross-origin resource sharing)。
    默认浏览器为了安全,遵循“同源策略”,不允许 Ajax 跨域访问资源,而为了允许这种操作,服务器端和客户端都要遵循一些约定。
    服务器端需设置以下响应头:

    Access-Control-Allow-Origin: <origin> | * // 授权的访问源 
    Access-Control-Max-Age: <delta-seconds> // 预检授权的有效期,单位:秒 
    Access-Control-Allow-Credentials: true | false // 是否允许携带 
    Cookie Access-Control-Allow-Methods: <method>[, <method>]* // 允许的请求动词 
    Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 额外允许携带的请求头 
    Access-Control-Expose-Headers: <field-name>[, <field-name>]* // 额外允许访问的响应头

    我们看到,Access-Control-Allow-Credentials 响应头会使浏览器允许在 Ajax 访问时携带 Cookie。其对应了ASP.NET Core的如下中间件设置:

    app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials());

    此外在客户端浏览器中,我们仍然需要对 XMLHttpRequest 设置其 withCredentials 参数,才能实现携带 Cookie 的目标。示例代码如下:

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    注意,为了安全,标准里不允许 Access-Control-Allow-Origin: *,必须指定明确的、与请求网页一致的域名。同时,Cookie 依然遵循“同源策略”,只有用目标服务器域名设置的 Cookie 才会上传,而且使用 document.cookie 也无法读取目标服务器域名下的 Cookie。

    如何让Jquery的AJAX使用CORS时携带Cookie


    跨域请求想要带上cookies必须在请求头里面加上xhrFields: {withCredentials: true}设置。

    $.ajax({
        url: "http://localhost:8080/orders",
        type: "GET",
        xhrFields: {
            withCredentials: true
        },
        success: function (data) {
            render(data);
        }
    });

    参考文献:

    允许跨域资源共享(CORS)携带 Cookie

    Jquery Ajax设置withCredentials解决跨域请求

  • 相关阅读:
    vue子组件向父组件传值
    定义特有属性的对象
    电话号码的校验
    多个图片的显示与隐藏
    原生的ajax请求----(播放托管到爱奇艺上的视频)
    将视频托管到爱奇艺 (第一步)
    2018年春季个人阅读计划
    《软件需求与分析》阅读笔记
    Ngers天气——开发进程4
    软件需求与分析读书笔记3
  • 原文地址:https://www.cnblogs.com/OpenCoder/p/9915214.html
Copyright © 2020-2023  润新知