【Vue基础】什么是跨域？如何解决跨域问题？浅浅了解一下什么是登录鉴权

1. 什么是跨域？

在了解什么是跨域之前，我们首先要了解一个概念——同源策略。

同源策略：

同源策略/SOP（Same Origin Policy） 是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略，浏览器很容易受到 XSS（跨站脚本攻击）、 CSFR （跨站请求伪造）等攻击。

所谓同源是指 “协议+域名+端口” 三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源，同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。

那么跨域呢，就是在进行接口请求或获取、操作DOM元素请求时（页面嵌入了iframe），两个页面资源之间的 “协议+域名+端口” 三者之中有任何一项不同即为跨域。

---

2.如何解决跨域问题？

1. 后台直接不做限制，放开所有请求。优点：方便；缺点：显而易见的不安全；

2. JSONP
   基本原理：利用script标签的 src 不受同源策略限制，需要后端配合，已经不常用了

3. 配置代理：Proxy
    
   首先在项目根目录下创建一个vue.config.js文件，然后在其中添加以下代码：

// vue.config.js for less-loader@6.0.0
module.exports = {
    devServer: {
        proxy: {
        	//👇 代理的名称，一般以这种格式命名，当然你也可以随便起
            '/xxx-api': {
                target: 'http://1.111.xx.123:3000',  // 后台接口的协议、域名、端口号
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/xxx-api': ''//路径重写
                    //如果不重写，则请求时的路径中会带有这个/xxx-api
                }
            },
        }
    }
};

最后，在请求时将原本的http://1.111.xx.123:3000替换为/xxx-api即可！

例如：
本来发送请求时是这样写的：axios.get('http://1.111.xx.123:3000/toplist')

配置好代理后改成这样：axios.get('/music-api/toplist')

---

什么是登录鉴权

登录鉴权即验证用户是否拥有访问系统的权利。

有这么几种方式：
        token、Cookie (session-cookie)、JESSIONID、OAuth、HTTP Basic Authentication

---

什么是token？

1. Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2. Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3. 使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
   …

Cookie (session-cookie)、JESSIONID、OAuth、HTTP Basic Authentication…
更多详情请自行网络搜索。