Axios 发布和 CodeIgniter 4 中的 CORS 问题答案

【问题标题】：Axios post and problem with CORS in CodeIgniter 4Axios 发布和 CodeIgniter 4 中的 CORS 问题
【发布时间】：2022-01-02 19:41:13
【问题描述】：

我尝试从 Vue 应用程序将数据发布到后端，但我遇到了 CORS 问题。我在后端使用 CodeIgniter 4。

这是我的 vue 服务：

import axios from "axios";

const apiUrl = "http://localhost:8080/admin/users/";

export default {

    create(userData) {
        return axios.post(apiUrl + "create", {
            firstName: userData.firstName,
            lastName: userData.lastName,
            email: userData.email,
            password: userData.password,
            role: userData.role
        }).then(response => {
            return response.data;
        }).catch(function() {
            const response = {
                status: 500,
                error: true,
                message: "Błąd połączenia z API.",
                data: []
            };

            return response;
        });
    }

}

来自控制台的信息：

在“http://localhost:8080/admin/users/create”访问 XMLHttpRequest 来自原点“http://localhost:8081”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。

我尝试在 public/.htaccess 中添加此代码，但它不起作用：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://localhost:8081"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
</IfModule>

【问题讨论】：

标签： vue.js axios codeigniter-4

【解决方案1】：

尝试：

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "http://localhost:8081"
    Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
</IfModule>

启用 apache 模块标头并重新启动 Apache 服务。

Apache: difference between "Header always set" and "Header set"?

Enable mod_headers in Apache in Windows

【讨论】：