Question

我一直在努力学习东西（Vue.js 2有路由），我想知道为什么每当我在家里（'/'）路线以外的任何其他路线上时，说localhost url会被添加到在进行API调用时使用适当的URL。一个例子如下：

const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`; // this.sub being the corresponding subreddit string

导致类似这样的事情：

'http://localhost:5000/subreddits/politics/https://www.reddit.com/r/politics/.json?limit=10'

以下是相关代码：

<script>
    export default {
        data() {
            return {
                sub: this.$route.params.sub,
                posts: [],
            }
        },
        watch: {
            '$route'(to, from) {
                this.sub = to.params.sub;
            }
        },
        methods: {
          fetchPosts: async function () {
            const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`;
            try {
              const res = await (await fetch(url)).json();
              this.posts = await (res.data.children);
            } catch(err) {
              console.error(err);
            }
          }
        },
        mounted() {
          this.fetchPosts();
        },
    }
</script>

Answer 1

您的项目有两个问题 1.主机为reddit的请求无法在localhost内发送 2.如果你使用反引号，单引号是多余的。

如果你使用VUE-CLI进行项目，要解决这些问题，你应该做两步。

在/config/index.js文件中，找到proxyTable，然后添加：

```

proxyTable: {
    '/reddit': {
        target: 'https://www.reddit.com/r',
        changeOrigin: true,
        pathRewrite: {
            '^/reddit': ''
        }
    }
}

在相关代码中：

```

<script>
    export default {
        data() {
            return {
                sub: this.$route.params.sub,
                posts: [],
            }
        },
        watch: {
            '$route'(to, from) {
                this.sub = to.params.sub;
            }
        },
        methods: {
          fetchPosts: async function () {
            const url = `/reddit/'${ this.sub }/.json?limit=10`;
            try {
              const res = await (await fetch(url)).json();
              this.posts = await (res.data.children);
            } catch(err) {
              console.error(err);
            }
          }
        },
        mounted() {
          this.fetchPosts();
        },
    }
</script>

```

为什么API请求被写入错误的URL（Vue.js 2）？

1 个答案: