返回

跨越之“Vue-Cli配置跨域代理”与持久化Vue的token

前端

揭开Vue.Cli跨域的真面目：一套全面的解决方案

跨域：编程中的拦路虎

跨域，对于前端和后端开发人员来说都是一个恼人的问题。它源于浏览器的同源策略，该策略限制了不同源网站之间的数据交换。同源是指协议、域名和端口完全相同。不同源的示例包括 http://www.example.com:8080 和 https://www.example.com:443。

在Vue.Cli中巧妙地解决跨域

在Vue.Cli中，我们可以借助代理来优雅地绕过跨域限制。代理充当中间人，将客户端请求转发到相应服务器。修改 vue.config.js 文件即可配置代理。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true
      }
    }
  }
}

此示例将所有以 /api 开头的请求代理到 http://localhost:8081 服务器。

在Vue中安全地存储Token

在Vue.js应用中，Token通常用于验证用户身份。为了保护Token的安全，我们可以将它们存储在本地存储或会话存储中。Vue.js提供了 localStorage 和 sessionStorage 来持久化Token。

// 将Token存储到本地存储
localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c')

// 从本地存储中检索Token
const token = localStorage.getItem('token')

// 将Token存储到会话存储
sessionStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c')

// 从会话存储中检索Token
const token = sessionStorage.getItem('token')

结论

通过代理和Token持久化，我们可以轻松克服Vue.Cli中的跨域障碍，同时确保Token的安全性。

常见问题解答

  1. 什么是代理？ 代理充当客户端和服务器之间的中介，允许数据在不同源网站之间流动。
  2. 如何配置Vue.Cli的代理？ 通过修改 vue.config.js 文件，我们可以指定代理目标和规则。
  3. 为什么要持久化Token？ 持久化Token可以保护Token的安全性，防止未经授权的访问。
  4. 如何使用 localStorage 和 sessionStorage？ localStorage 用于持久化在浏览器会话中保持的数据，而 sessionStorage 仅在当前选项卡或窗口打开时存储数据。
  5. 跨域有什么替代解决方案？ JSONP 和 CORS 是跨域的替代方案，但代理通常更灵活、更安全。