vue跨域访问

Question

index.js配置

dev: {

env: require('./dev.env'),
port: 3000,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
      '/api': {
                  target: 'http://192.168.3.200:8888/',
                  changeOrigin: true,
                    autoOpenBrowser: true,
                    cssSourceMap: false,
                  pathRewrite: {
                       '^/api': '/'
                      }
                 }
},

下面是 页面请求
created: function () {

this.$http.get('kbar_channel/page')
.then((res) => {
    debugger;
  this.newsList = res.data
}, (err) => {
  console.log(err)
})

},

我本地起的服务器 端口3000
想过要访问 http://192.168.3.200:8888/kbar_channel/page这个接口
配置如上 但是请求的还是localhost

这是为什么呢 求大神指点

Answer 1

// 配置
proxyTable: {
            '/kbar_channel':{
                target:'http://192.168.3.200:8888',
                changeOrigin:true,
            }
},
//请求 
this.$http.get('/kbar_channel/page')
.then((res) => {
    debugger;
  this.newsList = res.data
}, (err) => {
  console.log(err)
})

按我这样配置一下

Answer 2

地址应该是http://192.168.3.200:8888/api/kbar_channel/page吧

Answer 3

怎么好多提问都是这样
完全没按照配置写

'/api': {   //匹配到/api才进行代理
      target: 'http://192.168.3.200:8888/',  //目标地址这里不应该加/除非下面重写'^/api/': ''
      changeOrigin: true,  //代理发送
      pathRewrite: {
           '^/api': '/'  //重写地址 /api/user -> //user 所有你要把'/'改成''
          }
     }

你的配置的意思是
/api/kbar_channel/page -> http://192.168.3.200:8888///kbar_channel/page

'/api': {
      target: 'http://192.168.3.200:8888',
      changeOrigin: true, 
      pathRewrite: {
           '^/api': '' 
          }
     }

/api/kbar_channel/page -> http://192.168.3.200:8888/kbar_channel/page