跨域访问 - cookies

跨域写入cookie

可以通过URL参数实现跨域cookie写入,例如,www.a.com域需要为www.b.com域写入cookie信息,token=abcd。

输入图片说明

清单:实现重定向,URL: http://www.a.com/token?from=http://www.b.com/set_cookie

@WebServlet("/token")
public class TokenGeneratorServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 生成token
        String token = "abcd";

        String cookieName = "token";
        String cookieVal = token;

        //写入本域cookie
       //Cookie cookie = new Cookie(cookieName, cookieVal);
        //cookie.setPath("/");
        //response.addCookie(cookie);

        // 请求的原始来源域
        String from = request.getParameter("from");

        response.sendRedirect(from + "?cname=" + cookieName + "&cval=" + cookieVal); //重定向到目标域
    }

}

清单:实现写入cookie,URL:http://www.b.com/set_cookie

@WebServlet("/set_cookie")
public class SetCookieServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        
        // 将要写入的cookie项,调用者通过参数传递
        String cookieName = request.getParameter("cname");  //cookie的key
        String cookieVal = request.getParameter("cval");  //cookie的value

        // 生成cookie
        Cookie cookie = new Cookie(cookieName, cookieVal);
        cookie.setPath("/");
        response.addCookie(cookie);
    }

}

缺点:只能实现向一个域写入cookie

跨域读取cookie

可以通过js的script标签读取其它域的cookie。

假设页面cookie_reader.jsp 需要读取www.b.com的cookie值token,现在www.b.com域名的网站对外暴露了 URL为http://www.b.com/read_cookies的API,该API将读取该域所有的cookie键值对,然后把键值对以下面这种形式,返回。

var cookie_key1=cookie_value1; var cookie_key2=cookie_value2

清单:cookie_reader.jsp 读取cookie值:token,并弹窗

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>读取其它域cookie信息</title>

    <!--
        通过script标签执行另一个域实现的读取cookie的方法,
        script标签返回结果将是变量定义形式的js代码,其中每一个变量表示一个cookie项
        这些代码加载后,此页面后续js代码可直接读取已定义的变量值,即各cookie值
     -->
    <script type="text/javascript" src="http://www.b.com/read_cookies"></script>

</head>
<body>

<script type="text/javascript">
    alert(token);
</script>
</body>
</html>

清单:read_cookies API接口

@WebServlet("/read_cookies")
public class ReadCookiesServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {

        Cookie[] cookies = request.getCookies();
        StringBuilder builder = new StringBuilder();

        // 一定要正确设置响应类型,否则可能导致IE不解析js而直接进行下载操作
        response.setContentType("application/javascript");

        if (cookies != null) {
            PrintWriter writer = response.getWriter();
            for (Cookie cookie : cookies) {
                builder.setLength(0);
                // 结果类似于var token='test123';
                builder.append("var ")
                        .append(cookie.getName())
                        .append("=")
                        .append("'")
                        .append(cookie.getValue())
                        .append("'")
                        .append(";");
                writer.write(builder.toString());
            }
        }
    }
}

转载于:https://my.oschina.net/thinwonton/blog/1036793

### 安装和配置 `vue-cookies` 库 要在 Vue 3 项目中安装和使用 `vue-cookies`,可以按照以下方式操作: #### 1. 安装依赖 通过 npm 或 yarn 将 `vue-cookies` 添加到项目中: ```bash npm install vue-cookies --save ``` 或者如果使用 yarn,则运行: ```bash yarn add vue-cookies ``` 此命令会将 `vue-cookies` 插件下载并保存至项目的依赖列表中[^4]。 --- #### 2. 在 `main.js` 中引入和挂载插件 在 Vue 3 的入口文件 `main.js` 中完成如下设置: ##### 方法一:直接注册插件 这是推荐的方式之一。通过调用 `.use()` 方法来全局加载 `vue-cookies`: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import cookies from 'vue-cookies'; const app = createApp(App); app.use(cookies); // 注册 vue-cookies 插件 app.mount('#app'); ``` 这种方式简单明了,并且适用于大多数场景。 --- ##### 方法二:绑定到原型链上(兼容 Vue 2 风格) 如果你更倾向于像 Vue 2 那样访问 `$cookies` 对象,可以通过扩展 `Vue.prototype` 来实现这一功能。不过需要注意的是,在 Vue 3 中不再支持直接修改 `Vue.prototype`,因此需要手动创建一个自定义属性供组件内部使用[^2]: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import cookies from 'vue-cookies'; // 创建应用实例 const app = createApp(App); // 手动挂载 $cookies 到上下文中 app.config.globalProperties.$cookies = cookies; // 挂载应用 app.mount('#app'); ``` 这样可以在任何地方通过 `this.$cookies` 访问该对象。 --- #### 3. 使用 `vue-cookies` 一旦完成了上述步骤之后就可以轻松地在应用程序中的任意位置读取或写入 Cookies 数据了。下面是一些常见的 API 调用示例: - **设置 Cookie** ```javascript this.$cookies.set('username', 'JohnDoe', '7d'); // 存储名为 username 的 cookie 值为 JohnDoe 并设定有效期为七天 ``` - **获取 Cookie** ```javascript let username = this.$cookies.get('username'); // 获取存储的用户名 console.log(username); // 输出: JohnDoe ``` - **删除 Cookie** ```javascript this.$cookies.remove('username'); // 删除指定名称的 cookie ``` 以上这些基本的操作都可以帮助开发者快速管理浏览器端的数据缓存需求[^1]. --- ### 注意事项 尽管 `vue-cookies` 提供了一种便捷的方式来处理客户端数据持久化问题,但在实际开发过程中还需要注意安全性以及等问题。例如敏感信息不应该轻易暴露于前端环境之中;另外当涉及到不同名之间的资源共享时也需要额外考虑 CORS 策略的影响[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值