时间戳

首页 > 解决方案 > NuxtJS - 从外部 API 获取数据后，控制台输出错误 CORS

javascript - NuxtJS - 从外部 API 获取数据后，控制台输出错误 CORS

问题描述

通过 news.vue ( http://localhost:3000/news )，我能够使用 Fetch API 请求外部 API 并获取 JSON 格式的文章数据。

<section class="section-news">
  <div
    v-if="articles != null"
    class="section-news__cards"
  >
    <div
      v-for="article in articles.data.contents"
      :key="article.id"
      class="section-news__card"
    >
      <div class="section-news__media image_wrapper">
        <img
          :src="article.eyecatch"
          alt="note eyecatch"
        />
      </div>
      <div class="section-news__body">
        <div class="section-news__body-date">{{ article.publishAt }}</div>
        <p class="section-news__body-description">{{ article.body }}</p>
      </div>
    </div>
  </div>
</section>

但是，当屏幕从 index.vue ( http://localhost:3000/ ) 或 about.vue ( http://localhost:3000/about ) 转换到 news.vue ( http://localhost:3000/news ) ，我在控制台中收到以下错误有人可以解释这个问题吗？我想知道如何解决这个问题。

在此处输入图像描述

标签： javascriptvue.jsnuxt.js

解决方案

如果 CORS 配置设置不正确，浏览器控制台会出现类似“Cross-Origin Request Blocked”的错误；这用于明确允许某些跨域请求，同时拒绝其他请求。例如，如果网站提供可嵌入服务，则可能需要放宽某些限制。

我们通常在后端处理此配置，但您可以通过将 Allow-Control-Allow-Origin 添加到您的 chrome 浏览器并在其中添加您的本地主机来在本地系统上解决此问题。有一个类似的问题可能会对您有所帮助。

推荐阅读