vue-cli配置跨域请求

应用场景以及问题描述#

• 有的时候我们在本地环境进行项目开发（http:///localhost:8080）时需要根据后端（http://localhost:8888/api）提供的接口获取数据，并渲染到页面上
• 因为浏览器的同源策略的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

解决方案#

方案一：cors跨域(配置服务器)#

原理：全称 “跨域资源共享”，它允许浏览器向跨源服务器，发出XMLHttpRequest请求（配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据），从而克服了AJAX只能同源使用的限制。
缺点：这样会造成任何人都能向这台服务器要数据。

方案二：jsonp跨域#

原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)；请求数据类型dataType为jsonp，缺陷只支持get请求，且存在一些安全隐患

方案三：代理服务器#

原理：借助vue-cli脚手架开启代理服务器，再通过代理服务器去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器（本地服务器跟浏览器之间不存在跨域），利用了后台服务器之间请求不存在跨域的问题
步骤：
在vue-cli项目下看是否存在vue.config.js文件，如无则创建文件并新增如下配置

module.exports = {
  devServer: {
    proxy: {
      //灵活代理；请求前缀为/api时，走下面的代理
      '/api': {
        //代理服务器把请求转发给url(真正的后台服务器)
        target: 'url',
        // 是否启用websockets
        ws: true,
        //是否开启代理
        changeOrigin: true,
        //路径重写
        pathRewrite: {
          //匹配以api开头的路径替换成空字符串
           '^api': ''
         }
      },
     //配置多个代理；请求前缀为/demo时，走下面的代理
       '/demo': {
        target: 'url2',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
           '^demo': ''
         }
      },
    }
  }
}

代理服务器配置说明#

target#

devServer:{
  proxy:{
    '/api':{
      target: 'http://www.baidu.com'
    }
  }
}

上图表示 当请求地址中包含"/api"时要转发到的服务器地址，比如当vue-cli的地址为：http://localhost:8080/api/test时，会去请求http://www.baidu.com/api/test

pathRewrite#

devServer:{
  proxy:{
    '/api':{
      target: 'http://www.baidu.com',
      pathRewrite: {
        '^/api':''
      }
    }
  }
}

上面表示 当请求地址中以"/api"开头的地址替换成空字符串，比如当vue-cli的地址为：http://localhost:8080/api/test时，会去请求http://www.baidu.com/test