Nuxt.js采坑_nuxt 设置referer-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44827421/article/details/106504806

1. operation not permitted

参考链接:EPERM: operation not permitted’ error when building Nuxt app

百度了一波,首先是关于这个问题的文章比较少,都试了一遍, 用管理者权限运行win+x也不行, 最后是关掉了vscode, 关掉了控制台, 重新打开,项目就可以起起来了, 如果你试了还是不行, 可以尝试上面链接中的其他

2. 请求的数据图片403

参考链接: 访问图片出现403的解决办法

请求回来的数据, 图片在浏览器端报403无法展示, 但是图片的链接在浏览器中可以打开, 在浏览器中打开之后的图片, 页面可以正常展示.

403(防止盗链)

使用images.weserv.nl方案,把现在的图片连接传进来，返回一个不受限制的路径
使用no-referrer方案,在前端页面头部添加一个meta

	<meta name="referrer" content="no-referrer" />

由于nuxt项目中没有html的文件(可以在nuxt.config.js中设置头部内容,但是效果不咋滴,会有几个图片404), 我参考了上文中的第一种方式, 给了一个过滤器

  filters: {
    urlFormat(url) {
      return url.replace(
        /^(http)[s]*(\:\/\/)/,
        "https://images.weserv.nl/?url="
      );
    }
  }

如果是gif的图片, 建议使用第二种方案哦~

3. 在asyncData中请求多个接口(大于等于两个)

在这里插入图片描述
场景是, 在一个电影列表的demo中, 当点击列表中某一个电影时会跳转到列表详情,但是详情中需要展示的数据分散在两个接口中,一开始我是在另外一个接口的回调中调了另外一个接口, 后来是用了await等待接口完成之后调另外一个, 总之就是点击之后报了上图的警告并且不展示详情

正确的打开方式:

  async asyncData(context) {
    try {
      let [res, backData] = await Promise.all([
        axios.get(`/${context.params.type}/${context.params.id}`),
        axios.get(`/details`)
      ]);
      backData.data.forEach(info => {
        if (info[`${context.params.type}Id`] == context.params.id) {
          for (var key in info) {
            res.data[key] = info[key];
          }
        }
      });
      return {
        detail: res.data
      };
    } catch (error) {
      context.error({ statusCode: 404, message: "页面未找到或无数据" });
    }
  }