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

Question

我正试图使用$http.get从Vue应用程序发送GET request。当我调用处理req的函数时，我在控制台中得到的只是：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";