Vue.js通过GET请求API被CORS阻止。

Question

我正在尝试在Vue.js中从API获取数据并使用console.log打印响应，但是我遇到了CORS问题，具体来说是：from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我读到需要创建一个vue.config.js文件，我已经创建了，但没有任何改变。我还尝试了使用fetch api,也许我在Vue中使用http调用的方式有误，那么我该如何获取数据并解决这个错误呢？

这是我的组件代码：

<template>
  <div class="container">
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  methods: {},
  mounted() {
    axios
      .get(
        "https://base-url"
      )
      .then(response => console.log(response));
  }
};
</script>

我的vue.config.js文件内容如下：

module.exports = {
    devServer: {
        proxy: 'base-url',
    }
}

- Mahma Deva

---

那个错误通常不表示正在发生什么。但我猜测你的后端不允许CORS。 - Esteban Vargas

所以这与您的客户无关。您的 API 必须更改。 - Daniel A. White

Answer 1

我认为您可能需要在调用的端点中设置一个中间件，例如以下内容：

// ACCEPTING CROSS SITE REQUESTS
api.use(cors());
api.use((req, res, next)=>{
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

请尝试将此内容添加到您正在调用的终端API中，以便新的调用可以获得授权。

- Richard Valenz

Answer 2

您应该拥有'Access-Control-Allow-Origin: '头信息，以确保您的[api基础网址]返回此头信息，使您的浏览器允许请求通过而不被阻止（作为一种保护方式）。

关于Access-Control-Allow-Origin的更多信息。

PHP示例：

<?php
  header('Access-Control-Allow-Origin: *') // to allow all sites
  ... the rest of the code

- NervN

Answer 3

在最近的vuejs版本中，例如如果远程API位于http://localhost:9002/tasks，则使用服务器配置。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/tasks': 'http://localhost:9002'
    }
  }
})

- Vallabha Vamaravelli

Answer 4

你在vue.config中设置了CORS的头部配置吗？应该长成这个样子。

- Thecor

---

很遗憾，这是一家公司的开放API，我无法访问他们的后端。；/ - Mahma Deva

你的Vue.js应用程序是否无法退出，或者是被API阻止了？你发送的标头不受API控制。这段代码应该与您配置文件中的devServer设置一起使用。 - Thecor

这些是响应头，不应该出现在前端请求中。服务器决定允许哪些来源。 - János Veres

Answer 5

我发现我的问题所在，设置代理后，我必须将我的get请求更改为

mounted() {
    axios
      .get(
        "http://localhost:8080/https://base-url"
      )
      .then(response => console.log(response));

问题已经解决。

- Mahma Deva