axios请求百度地图api出现了跨域问题，proxyTable设置代理无效

Question

代理：

dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://api.map.baidu.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
       }
     },

axios:

axios({
            method:'get',
            url:'/api/geocoder/v2/?output=json&ak=GFBSz9LUkvNn4t2kDMUBWxbldrcHLZsc&callback=?'+'&address='+_this.newitems,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            }
            }).then(function (response) {
             console.log(response.result);
          })
           .catch(function (error) {
              console.log(error);
           }); 
        },       

Answer 1

请不要这样使用、建议直接使用jsonp等跨域方法（后面会解释）

作者使用proxytable是想让开发者在开发环境下、可以解决前端和服务端分离的通信问题

但是百度api还是要跨域调用的、因为你build之后的dist要和服务器整合、proxy的东西就失效了

proxy的原理、仔细看dev-server就知道了、这里贴两张图

。。。上传不上去、粘代码吧

// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable

dev-server的第22行、有这样两行代码

作者使用了http-proxy-middleware这个中间键、来转发请求

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

这里解释了、其实是在使用dev-server的时候、请求会通过node转发到你自己的服务端

node作为服务端去请求你的服务端是没有跨域的、所以可以

但是百度的web api是要跨域调用的、因为你的dev-server不可能在打包之后还继续用

http://liujians.me/#/article/...

这里贴出来、我之前写的一篇博客、

举个例子

http://api.map.baidu.com/highacciploc/v1?qterm=pc&ak=请输入您的AK&coord=bd09ll&callback_type=jsonp&callback=test

注意最后两个参数、设置jsonp方式和设置callback的方法名

然后你在全局设置test这个方法就可以了、注意是全局、第一个参数就是返回的data

具体可以查看我的那片博客、希望可以帮到你

Answer 2

楼主这问题是怎么解决的，我也遇到了同样的问题。。。