Question

我正在尝试使用 GET request 从我的 Vue 应用程序发送 $http.get。当我调用处理请求的函数时，我在控制台中得到的只是：Access to XMLHttpRequest at X from origin Y has been blocked by cors policy

即使不安全，我也尝试将以下内容添加到我的 CI3 控制器中：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

我是否必须从 Vue 发送标头？

我必须提到，如果我在浏览器或 PostMan 中打开它，我可以访问我发送获取请求的链接

Vue.js 代码：

if(queryString !== '') {
                this.$http.get('LINK_HERE', {params: {q: queryString}})
                    .then(function(response) {
                        console.log(response);
                    })
            }

我错过了什么？我真的尝试了很多解决方案，但没有任何帮助，在 Vue 中成为菜鸟也无济于事。

请求头：

Accept: application/json, text/plain, */*
Referer: LINK_HERE
sec-ch-ua: "Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

响应标题：

Content-Length: 366
Content-Type: text/html; charset=iso-8859-1
Date: Wed, 30 Dec 2020 14:46:13 GMT
Location: LINK_HERE/API_PATH
Server: Apache/2.4.33 (Win64) OpenSSL/1.1.0g PHP/5.6.35

先谢谢你！

Answer 1

对于初学者，去掉这两行：

header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

一旦开始工作，您可能想重新添加它们，但假设没有其他影响（例如 Web 服务器本身添加的标头），这些是最有可能导致问题的原因。

如果这不能解决您的问题，那么您需要检查您的开发者控制台以查看您的请求发送的所有标头以及您的响应返回的所有标头。如果您仍然遇到问题，请使用该信息更新您的问题。

Answer 2

尝试将您的 XMLHttpRequest 内容类型标头设置为“application/x-www-form-urlencoded”。如果您使用 axios 那么这是配置标题：

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

无法从 Vue.js 向 CodeIgniter 3 后端发送 GET 请求

2 个答案: