关于vue配置proxyTable解决跨域问题

后端给了个接口，在普通谷歌浏览器使用axios会出现跨域，但是在设置完谷歌允许跨域后，可以拿到数据。下面是百度后总结的方法
第一次在config/index.js下配置proxyTable 关于vue配置proxyTable解决跨域问题
然后在config/dev.env.js里

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',

 
})

然后导致在请求接口的时候无法成功，试了多遍后，发现要在config/dev.env.js里写baseUrl后缀需要加项目名

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl:'http://118.178.125.110:33001/XXXXXX',
 
})

然后config/index.js里

  dev: {
    env: require('./dev.env'),
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {  
      '/api': {  //使用"/api"来代替
    target: 'http://118.178.125.110:33001/XXXX', //接口域名 
    changeOrigin:true, //改变源 
    pathRewrite: { 
      '^/api': '' //路径重写 
      } 
  }
},

后面在请求接口的时候前面加上/api

 getdata(){  
     this.axios.post('/api/countNumber', {}).then(res => {
        
        if(res.status==200){
          this.getData.unshift(res.data);
          console.log(this.getData);
        }
  }).catch(function (error) {
    console.log(error);
  });
    }

关于vue配置proxyTable解决跨域问题

相关推荐