axios从Vue应用程序到运行在WAMP上的PHP API的CORS问题

我无法使用axios从Vue应用程序向运行在WAMP上的PHP API发出XHR请求

错误消息如下所示：

CORS策略已阻止从源“”访问“”处的XMLHttpRequest:对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头

正如你所见，这是CORS的问题。在一些文档之后，下面是我一直在做的修复工作（仍然不起作用）

Axios呼叫：

axios({
  method: 'get',
  url: 'http://localhost/myapp/api/test/1',
  data: JSON.stringify({}),
  headers: { 'Content-Type': 'application/json', },
  crossdomain: true,
});

如果我在我的网络浏览器中访问，我会得到我的回复

我试图在我的入口点（index.PHP）将这行代码放入我的PHPAPI中

我配置了WAMP：

更改了httpd-vhosts.conf和httpd.conf

# Virtual Hosts

<VirtualHost *:80>
  ServerName localhost
  ServerAlias localhost
  DocumentRoot "${INSTALL_DIR}/www"
  <Directory "${INSTALL_DIR}/www/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    Header set Access-Control-Allow-Origin "*"
    AllowOverride All
    Require local
  </Directory>
</VirtualHost>

#虚拟主机
服务器名本地主机
服务器别名本地主机
DocumentRoot“${INSTALL_DIR}/www”
选项+索引+包含+跟随符号链接+多视图
标题集访问控制允许原点“*”
允许超越所有
要求本地

• 在apache的模块中激活了“headers\u模块”

• 重新启动一切，清除缓存，从其他浏览器尝试

---

仍然无法工作，我是否遗漏了一些内容？

我在index.php文件的顶部使用此文件来修复CORS问题：

function cors() {
    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
        header("Access-Control-Allow-Headers: Origin, Authorization, X-Requested-With, Content-Type, Accept");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            // may also be using PUT, PATCH, HEAD etc
            header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: Origin, Authorization, X-Requested-With, Content-Type, Accept");

        exit(0);
    }
}
cors();

---

我在index.php文件的顶部使用它来修复CORS问题：

function cors() {
    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
        header("Access-Control-Allow-Headers: Origin, Authorization, X-Requested-With, Content-Type, Accept");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            // may also be using PUT, PATCH, HEAD etc
            header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: Origin, Authorization, X-Requested-With, Content-Type, Accept");

        exit(0);
    }
}
cors();

---

请尝试此扩展以进行交叉原点

---

尝试跨原点扩展

---

您需要选择一种方法。您可以通过Apache（您不需要额外的目录指令，因为您的文档根已经在该文件夹中）或者通过PHP来实现。如果您使用PHP，则不需要任何模块。一旦实现了其中一种方法，请检查实际的响应头，并查看是否设置了

访问控制允许源站。然后再报告。你需要选择一种方法。您可以通过Apache（您不需要额外的目录指令，因为您的文档根已经在该文件夹中）或者通过PHP来实现。如果您使用PHP，则不需要任何模块。一旦实现了其中一种方法，请检查实际的响应头，并查看是否设置了
访问控制允许源站。然后返回报告。阿尔伯特·平托的答案解决了问题，但感谢您提供这段代码！我马上就要把它整合起来。效果很好，100分！Albert Pinto的答案解决了问题，但感谢您提供这段代码！我马上就要把它整合起来。效果很好，100分！你可能发布了错误的链接，因为我不知道这与CORS有什么关系！用这个。你可能发布了错误的链接，因为我不知道这与CORS有什么关系！用这个。