Vue.js 对 API 的 GET 请求被 CORS 阻止

Posted 2023-02-22

【中文标题】Vue.js 对 API 的 GET 请求被 CORS 阻止

【英文标题】：Vue.js GET request to API gets blocked by CORS

【发布时间】：2020-10-02 16:40:23

【问题描述】：

我正在尝试从 Vue.js 和 console.log 中的 API 获取数据响应，但我遇到了 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',
    

【问题讨论】：

该错误通常并不表示正在发生的事情。但我的猜测是你的后端不允许 CORS。

所以它与您的客户无关。你的 api 必须改变

【参考方案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，以便授权新调用。

【参考方案2】：

你应该有 '访问控制允许来源：' 标题

所以请确保您的 [api base url] 返回此标头以使您的浏览器 允许您的请求在不存在的情况下通过（作为保护方式）

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

php 示例：

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

【参考方案3】：

您的 vue.config 中是否设置了 cors 的标头配置？应该看起来像这样。

【讨论】：

遗憾的是，它不是一家公司的开放 API，而且我无权访问他们的后端；/

是无法离开您的 Vue.js 应用程序还是被 API 阻止？您发送的标头不受 API 控制。这段代码应该与配置文件中的 devServer 设置一起使用。

这些是响应头，不属于前端请求。服务器决定允许哪些来源。

【参考方案4】：

我发现我做错了什么，在设置代理后我不得不将我的 get 请求更改为

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

这解决了问题。