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

Question

使用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）时，控制台中出现以下错误，有人能解释一下这个问题吗？我想知道我怎样才能解决这个问题。

Answer 1

如果CORS配置设置不正确，浏览器控制台将出现类似“跨源请求被阻止”的错误；这用于显式地允许一些跨源请求，同时拒绝其他请求。例如，如果一个站点提供了可嵌入的服务，那么可能需要放松某些限制。

我们通常在后端处理此配置，但您可以通过在chrome浏览器中添加允许-control-Allog-Origin并在其中添加localhost来解决此问题。有一个类似的问题可能会对你有所帮助。