vue中配置代理服务器（解决跨域问题）

为什么会出现跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

目前运用最多的解决方案

vue.config.js文件添加devServer，解决请求的跨域问题

  devServer: {       //开启代理服务器 (方式1)   配置多个代理
    proxy: {
      '/api': {       //'/api'是自行设置的请求前缀
        target: '特定的BaseUrl',
        pathRewrite:{'^/api':''},  //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
        ws: true,//用于支持websocket
        changeOrigin: true //用于控制请求头中的host值
      },
  }

在封装的request.js中配置

const requests = axios.create({
  //配置对象
  //基础路径，在发送请求时，路径当中会出现api
  baseURL:'/api',
  //代表请求超时的时间
  timeout:5000
});

看完了一键三连哦，谢谢！