创新实训（十）

由于我们的酒店推荐需要根据用户选中的景点进行相应的推荐算法，因此我要在前端添加展示某城市所有景点以及搜索某城市详细景点的方法。这里为了得到城市的景点信息，我使用了百度地图API接口，使用了它的行政区划区域地点检索接口。接口的链接组装倒是很简单，只需要将用户输入的内容和接口的网址参数用字符串拼起来就行了，但在我尝试连接接口的时候，出现了问题。

开始我并不知道要如何调用这个接口，于是直接用了我调用后端接口的方式——使用axios进行数据的传输与接收返回值，但是报错了，显示不允许访问该接口。在我确认了我的链接没有问题后，我意识到是我的连接方式不对，于是我查询了相关资料，发现是由于调用了第三方接口产生的跨域问题。解决方式也很简单，在config/index.js 中的dev里添加以下代码，设置一下代理就可以访问了：

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/baidu':{
        target:'http://api.map.baidu.com',
        changeOrigin: true,
        pathRewrite: {
          '^/baidu': ''
        }
      }
    },

这里要注意，‘/baidu’指的是在接收到以‘/baidu’开头的请求时，会进行拦截并处理，在该请求前面加入target中的内容，而pathRewrite中的’^/baidu’指的是该请求中的‘/baidu’会被替换成的内容，也就是我的代码中冒号后面的‘’。

在设置完代理后，在代码的链接中将开头的’http://api.map.baidu.com’替换为‘/baidu’，再次进行尝试，会发现这样页面就能够正常传送请求并接收返回值了。

var url =
            "/baidu/place/v2/search?query=" +
            encodeURIComponent("旅游景点") +
            "&region=" +
            encodeURIComponent(this.city) +
            "&output=json&page_size=4&page_num=0&ak=***";
          this.$axios({
            method: "get",
            url: url,
          })
           .then((res) => {
                this.showScenic(res);
            })
            .catch((res) => {
              alert("出错了！");
            });