Azure App Service上Nuxt 2前端尾斜杠及页面缓存异常问题

问题描述 #

部署在Azure App Service上的Nuxt 2前端出现异常：页面重定向、刷新或新标签打开时，URL会自动添加尾斜杠。多数页面无影响，但更新某页面（移除内嵌表单，改为跳转至新表单页）后，登录重定向至该页面时，/SomePage变为/SomePage/，此时加载的是旧版本页面（仍显示内嵌表单）。

后续调整路由：将旧页面改为动态路由，创建SomePage目录，内有_SomePage.vue和Form.vue，新表单页路由设为/SomePage/Form；尝试调整为独立的/Form路由，问题依旧；甚至移除该页面后，仍加载旧版本内容。本地运行完全正常，仅Azure环境出现此问题。

已尝试的解决方案 #

• 在nuxt.config.js添加trailingSlash: false，未解决问题且引发页面错误
• 添加临时重定向规则，将/SomePage/跳转至/SomePage/Form，但测试环境多次更新后失效
• 添加web.config规则移除尾斜杠，无效果

需求 #

排查问题根源（Nuxt路由还是Azure配置），并寻求有效解决方案：要么阻止URL添加尾斜杠，要么清除尾斜杠页面的旧缓存。

附SomePage.vue代码 #

export default {
  name: 'SomePage',
  layout: 'about',
  mixins: [global],
  //middleware: 'trailingslash',
  components: {

  },
  data() {
    return {
      metaDescription: null,
      metaKeywords: null,
      backupDescription: 'backup',
      backupKeywords: 'Backup',
      toggle: false,
      showInfo: true,
      loading: false,
      userId: '',
      productId: '',
      productName: '',
      existingSubscriptionId: '',
      startDate: '',
      endDate: '',
      active: false,
      institution: '',
      firstName: '',
      lastName: '',
      canRenew: false,
      subscriptionCost: 0.0,
      renewal: false
    };
  },
  head() {
    return {
      title: 'SomePage',
      meta: [
        {
          hid: 'somePage',
          name: 'somePage',
          content: 'somePage'
        },
        {
          name: 'description',
          hid: 'description-advantage',
          content: (this.metaDescription != null) ? this.metaDescription : this.backupDescription,
        },
        {
          name: 'keywords',
          hid: 'keywords-advantage',
          content: (this.metaKeywords != null) ? this.metaKeywords : this.backupKeywords,
        }
      ]
    }
  },
  mounted() {
    if (process.browser) {
      this.$gtag('config', process.env.GOOGLE_STREAM_ID, {
        page_title: this.$metaInfo.title,
        page_path: this.$route.fullPath,
      })
    }
    this.getSubscribeToFormPage();

  },
  created () {
    this.getMetaKeywordsAndDescription();
    this.loading = true;

    if (this.$route.params.subscribe) {
      this.toggle = true;
    }

  },
  methods: {
    getMetaKeywordsAndDescription() {
      return new Promise((resolve, reject) => {
        ConnectionContentService.getSectionKeywordsAndDescriptionByContentType(23, 24)
            .then((response) => {
              if (response) {
                this.metaKeywords = response.keywords;
                this.metaDescription = response.description;
              }
            })
            .catch((error) => {
              console.log(error);
            });
      });
    },
    viewSampleDocs() {
      this.$store.commit('data/setSampledocsCountryFilter', null);
      this.$store.commit('data/setSampledocsCategoryFilter', null);
      this.$store.commit('data/setSampledocsKeywordFilter', null);
      this.$store.commit('data/setSampledocsFalsifiedFilter', null);
      this.$store.commit('data/setSampledocsIssuedFilter', null);
      this.$store.commit('data/setSampledocsCompletedFilter', null);
      this.$store.commit('data/setSampledocsSortFilter', null);
      this.$store.commit('data/setCurrentPageSampledocs', null);
      this.$router.push({ path: '/SampleDocumentsViewAll'});
    },
    goToSubscribePage(){
      this.$router.push({ path: '/Advantage/Subscribe'});
    },
    paymentFocus(){
      this.toggle = !this.toggle;
      this.showInfo = !this.showInfo;
    },
    goToUserProfile(){
      this.$router.push({ path: '/UserDashboard'});
    },
    showLoginModal() {
      //
      this.$bvModal.show("bv-modal-login");
    },
    openChartKeys(){
      this.$store.commit('data/setResourcesCategoryFilter',{text:"Charts & Keys", value: process.env.NUXT_RESOURCE_CATEGORY_CHARTS});
      this.$store.commit('data/setResourcesCountryFilter', null);
      this.$store.commit('data/setCurrentPageResources', null);
      this.$store.commit('data/setResourcesSortFilter', null);
      this.$router.push({ path: '/ResourceBoardViewAll'});
    },
    openPublications() {
      this.$store.commit('data/setResourcesCategoryFilter',{text:"Research & Analysis", value: 18});
      this.$store.commit('data/setResourcesCountryFilter', null);
      this.$store.commit('data/setCurrentPageResources', null);
      this.$store.commit('data/setResourcesSortFilter', null);
      this.$router.push({ path: '/ResourceBoardViewAll'});
    },
    getSubscribeToFormPage() {

      return new Promise((resolve, reject) => {
        SubscriptionService.subscribeToFormPage()
            .then((response) => {
              if (response) {
                this.subscriptionCost = response.productPrice;
                this.institutionName = response.institution;
                this.existingSubscriptionId = response.existingSubscriptionId;
                this.productId = response.productId;
                this.productName = response.productName;
                this.userId = response.userId;
                this.startDate = response.existingSubscriptionStartDate;
                this.endDate = response.existingSubscriptionEndDate;
                this.active = response.existingSubscriptionIsActive;
                this.canRenew = response.canRenew;

                if (response.firstName)  this.firstName = response.firstName;
                if (response.lastName)  this.lastName = response.lastName;

                if (this.existingSubscriptionId) this.renewal = true;
                this.loading = false;
              }
            })
            .catch((error) => {
              let message = '';
              try {
                if (error.response.data) {
                  message = error.response.data.status + ' : ' + error.response.data.error;
                  this.$toast.error(message, {
                    position: "top-right",
                    timeout: 5000,
                    closeOnClick: true,
                    pauseOnFocusLoss: true,
                    pauseOnHover: true,
                    draggable: true,
                    draggablePercent: 0.6,
                    showCloseButtonOnHover: false,
                    hideProgressBar: true,
                    closeButton: "button",
                    icon: true,
                    rtl: false
                  });
                }
                else if (error.response && error.response.status === 403) {
                  message = '403: Insufficient Privileges';
                  this.$toast.error(message, {
                    position: "top-right",
                    timeout: 5000,
                    closeOnClick: true,
                    pauseOnFocusLoss: true,
                    pauseOnHover: true,
                    draggable: true,
                    draggablePercent: 0.6,
                    showCloseButtonOnHover: false,
                    hideProgressBar: true,
                    closeButton: "button",
                    icon: true,
                    rtl: false
                  });
                }
                // else if (error.response.status === 401) {
                //   this.$nuxt.error({ statusCode: 401, message: 'User is not authenticated' });
                // }
                this.loading = false;
              } catch (e) {
                this.loading = false;
                this.$nuxt.error(error);
              }
            });
      });
    }
  }
}

内容的提问来源于stack exchange，提问作者MegaStack