关于vue-cli2.X配置proxyTable解决跨域问题

最新推荐文章于 2022-05-10 09:53:11 发布

Cold__Star

最新推荐文章于 2022-05-10 09:53:11 发布

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： proxyTable vue配置跨域

本文链接：https://blog.youkuaiyun.com/Cold__Star/article/details/88848502

本文介绍了一种通过配置代理表和修改环境变量来解决前端开发中跨域问题的方法。具体步骤包括在config/index.js中配置代理表，以及在config/dev.env.js中设置正确的baseUrl。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端给了个接口，在普通谷歌浏览器使用axios会出现跨域，但是在设置完谷歌允许跨域后，可以拿到数据。下面是百度后总结的方法
第一次在config/index.js下配置proxyTable 配置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);
  });
    }