浏览器同源策略

MDN Web Docs浏览器的同源策略

同源策略

是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

源的定义

如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，具有双重/三重/四重/五重等通用形式。）

下表与URLhttp://api.lostsheep.cn/index.html对比示例：

Vue解决跨域问题

Vue和Vue-CLI的差别

这个问题曾困扰了我一小段时间，简单来说，Vue CLI = Vue + 一堆JS插件

Vue:一套框架，用于构建用户界面的渐进式框架

Vue-CLi:基于 Vue.js进行快速开发的完整系统。

下面附上一些简单的注意事项和版本区分：

版本号

Vue CLI4.5及以上，对应Vue3

Vue CLI 4.5以下，对应Vue2

NPM包名

Vue3 对应 vue/cli npm install -g @vue/cli

Vue2 对应 vue/cli npm install -g @vue/cli -init

启动命令

Vue3 npm run serve

Vue2 npm run dev

proxy

Proxy(中文:代理),是一种特殊的网络服务，允许一个网络终端（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。向目标网站或服务器隐藏IP。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，以防止攻击。

Proxy 和 VPN的区别：VPN能够进行加密传输，保护用户不受到追踪、监控和攻击。而一般的Proxy不具备加密功能

Vue、proxy解决跨域问题

打开Vue的配置文件，项目根目录下vue.config.js文件，更改如下：

// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
//   transpileDependencies: true
// })

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api2.lostsheep.cn/',
        changeOrigin: true,
        pathRewrite: {
           '^/api': ''
        }
      }
    }
  }
}