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

【问题标题】：Can't send GET request from Vue.js to CodeIgniter 3 backend无法从 Vue.js 向 CodeIgniter 3 后端发送 GET 请求
【发布时间】：2021-04-07 02:40:35
【问题描述】：

我正在尝试使用 $http.get 从我的 Vue 应用程序发送 GET request。当我调用处理请求的函数时，我在控制台中得到的只是：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 中打开它，我可以访问我发送 get 请求的链接

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

提前谢谢你！

【问题讨论】：

你能添加你正在使用的php脚本吗，你是在开始时初始化标题吗？

标签： javascript php vue.js codeigniter

【解决方案1】：

首先，去掉这两行：

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

您可能希望在它工作后重新添加它们，但假设没有其他影响（例如 Web 服务器本身添加的标头），这些是问题的最可能原因。

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

【讨论】：

删除行并没有解决它。我更新了问题。
如果您直接访问处理程序，您是否也可以发布响应标头？
哦，实际上您可以看到问题所在。如果这些是您的响应标头，您可以看到 Access-Control-Allow-Origin 标头未设置。这很可能是您的 nginx 中的配置问题，其中服务器正在服务器级别清除该标头。这种做法确保开发人员不会暴露安全问题并不少见。
如何检查甚至禁用此行为？
这可能取决于您的托管环境。它是自我管理的云、vps 还是金属服务器？或者它是一个共享的托管环境？是否有其他人管理服务器？你有终端访问服务器的权限吗？

【解决方案2】：

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

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

【讨论】：