Ajax请求携带Cookie

xhr

先来了解下xhr xhr,全称为XMLHttpRequest,用于与服务器交互数据,是ajax功能实现所依赖的对象,jquery中的ajax就是对 xhr的封装。 还有axios和fetch请求都属于xhr请求,都是基于标准 Promise 实现。

ajax cookie跨域处理

简单说说cookiesession的关系

不少朋友搞的不是特别清楚,一知半解的,在这里阐述下

cookie存储于客户端浏览器,默认生命周期跟随浏览器,浏览器关闭,cookie就会失效,tab标签也关闭了并不会失效

session存储于服务器,比如tomcat,默认失效时间30分钟,当然也可以通过redis来存储。

这里登录做个示例说明

未登录状态下,匿名用户通过客户端浏览器请求数据,都是无状态的(服务端不知道你是谁

用户进行请求登录操作,登录成功,服务端会在response header里加一个Set-Cookie写入浏览器中。

之后客户端在以后的请求中,会自动在请求头中携带此cookie。

cookie有一些属性,比如

  • 失效时间(跟随浏览器,但是也可以进行持久化。跟localstorage和sessionstorage类似)
  • httponly(设置为true的话,客户端在控制台就获取不到)
  • path(默认为/)

同源情况下,比如是前后端不分离的项目,xhr(ajax)请求没有任何问题,但是会发现,不支持cookie跨域

非同源情况下,xhr(ajax)请求服务端处理了,但是不会进行响应,会显示如下错误。也就是出现了跨域问题。

所以,解决接口跨域和解决xhr cookie跨域,是不一样的。

解决cookie跨域需要客户端和服务端都做处理,主要操作在服务端。

客户端

ajax请求添加该参数即可

xhrFields: {
    withCredentials: true
},

同理axios也是如此

axios.defaults.withCredentials = true

注意,修改cookie值直接document修改即可,请求的时候浏览器会自动携带的。 不需要在header中添加cookie头,这样做是没有任何意义的。比如

headers: {
    'Cookie': 'JSESSIONID=6FA9E27092EC212E439851D4831AADE6'
}

服务端

添加允许跨域操作,此处表示Spring框架,直接用@CrossOrigin处理即可(最为简单)

@CrossOrigin(value = "*", allowCredentials = "true")

服务端设置跨域的几种方式

方式一 重写addCorsMappings方法

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
            .maxAge(3600)
            .allowCredentials(true);
    }
}

方式二 对单个接口处理

// 需要设置前端请求的url。不支持*
responses.setHeader("Access-Control-Allow-Origin", "http://localhost:63342");
// 设置允许跨域的方法
responses.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// 之后需要设置允许cookie跨域
response.setHeader("Access-Control-Allow-Credentials", "true");

方式三 @CrossOrigin注解

@CrossOrigin(value = "*", allowCredentials = "true")

方式四 nginx配置添加允许跨域请求

server {
    listen 5566;
    server_name localhost;
        # 指定客户端的请求地址
        add_header 'Access-Control-Allow-Origin' 'http://localhost:63342';
        add_header 'Access-Control-Allow-Credentials' true;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization,token,r,sign,time";

    location /  {

      if ($request_method = OPTIONS ) {
                   return 200;
         }

           proxy_method get;

           proxy_set_header X-real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

           proxy_pass  http://127.0.0.1:5005;
           proxy_set_header Host $host;
       }

}

OK,完美解决!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mycat数据库中间件入门

    https://blog.csdn.net/u013467442/article/details/56955846

    陈灬大灬海
  • 微信小程序official-account组件开发

    官方apihttps://developers.weixin.qq.com/miniprogram/dev/component/official-account...

    陈灬大灬海
  • rsync实现服务器之间同步目录文件

    需求:将192.168.1.10的/opt/vue/index.html文件 和 /opt/vue/static目录同步到远程192.168.1.130的/op...

    陈灬大灬海
  • 了解iOS消息推送一文就够:史上最全iOS Push技术详解

    1)在线Push:比如QQ、微信等IM界面处于前台时,聊天消息和指令都会通过IM自建的网络长连接通道推送过来,这种Push在本文中暂且称为“在线Push”;

    JackJiang
  • 国庆节前端技术栈充实计划(2):抽空打好JavaScript基础

    所有现代的网页浏览器、NodeJ以及几乎所有其他JavaScript环境都支持使用一套日志记录方法将信息写入控制台中。这些方法中最常用的是 console.lo...

    疯狂的技术宅
  • 用Flask+Aiohttp+Redis维护动态代理池

    崔庆才
  • 如何让你的小程序在市场中脱颖而出?这里就有答案

    知晓君
  • git 入门教程之里程碑式标签 原

    "春风得意马蹄疾,一日看尽长安花",对于项目也是如此,最值得期待的恐怕就要数新版本发布的时刻了吧?每当发布新版本时要么是版本号命名(比如v0.0.1)或者代号命...

    雪之梦技术驿站
  • Python 运行 Appium 测试的示例

    版权声明:如需转载本文章,请保留出处! https://blog.csdn.net/xc_zhou/article/details/89609177 ...

    周小董
  • 如何将ownCloud转换为Nextcloud

    ownCloud的核心开发团队中一部分人员启动了一个名为Nextcloud的项目。虽然ownCloud将继续开发,但您可能想了解新项目的功能。Nextcloud...

    小铁匠米兰的v

扫码关注云+社区

领取腾讯云代金券