Vue 配置proxy跨域

一. 为什么会出现跨域问题

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

二. 什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

三. 前端跨域三种解决方式（CORS、JSONP、代理跨域）

1.先来说一下代理跨域

• 需要自己在项目根路径下创建vue.config.js文件

module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost本地主机
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
      //配置跨域
      '/api': {  // 拦截以 /api 开头的接口
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端 这里true表示实现跨域
        pathRewrite: { //这里理解成用'/api'代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用'http://m.sirfang.com/api/user/add'，直接写‘/api/user/add’即可
          '^/api': '/'
        }
      }
    }
  }
}

• 然后就可以使用了