vue设置代理
这里vue代理的是 vue 静态服务器做代理。
使用的是 http-proxy-middleware 这个模块。（相当于 node.js 的一个人插件）

  1. // vue-cli3.0 里面的 vue.config.js
  2. module.export = {
  3.     devServer: {
  4.         '/api':{
  5.             target: 'http://test.xxx.com', // 后台接口域名
  6.             ws: true, // 如果要代理 websockets,配置这个参数
  7.             secure: false, // 如果是https接口，配置这个参数
  8.             changeOrigin: true, // 是否跨域
  9.             pathRewrite: {
  10.                 '^/api': '/'
  11.             }
  12.         }
  13.     }
  14. }
  15. /*
  16.     请求地址：'/api/xxx/xx'
  17.     当node服务器遇到以‘/api’开头的请求，就会把 target 字段加上。
  18.     然后请求地址就变成：‘http://test.xxx.com/api/xxx/xx’
  19.     然后下面的 pathRewrite 表示的就是 把 ‘/api’替换成空，那么请求地址（有‘/api‘开头的请求）就变成 ‘ttp://test.xxx.com/xxx/xx’
  20. */

vue proxyTable接口跨域请求调试

在Vue-cli项目中的config文件夹下面有三个JS文件, 首先 ,在 index.js中的Dev{ }中做如下配置

  1. proxyTable: {
  2.     '/api': {
  3.         target: "http://www.baidu.com", // API服务所在IP及端口号
  4.         changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
  5.         pathRewrite: {
  6.             '^/api': '' // 重写路径
  7.         }
  8.     }
  9. },

然后,配置开发环境 , 即在 dev.env.js中配置

  1. 'use strict'
  2. const merge = require('webpack-merge')
  3. const prodEnv = require('./prod.env')
  4. module.exports = merge(prodEnv, {
  5.     NODE_ENV: '"development"',
  6.     BASE_API: '"http://www.baidu.com"' //配置为本地地址才会访问到本地虚拟的服务器，从而通过第1步中代理访问API服务，避免跨域 })
  7. }

最后 ,配置生产环境 ,即在prod.env.js中配置

  1. 'use strict'
  2. module.exports = {
  3.     NODE_ENV: '"production"',
  4.     BASE_API: '"http://www.baisu.com"' //产品环境
  5. }

接下来,在组件中调用后台接口

  1. axios({
  2.     method: "get",
  3.     url: "api/getdata",  //使用 api+具体接口路径 
  4.     params: {
  5.         id:1
  6.     }
  7. }).then(function(res) {
  8.     console.log(res)
  9. })

最后,最最最重要 的一点, 一定要重新启动项目 npm run dev , 才会起作用呐 !

vue-cli中的 proxy 代理配置的方法