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

Posted 2023-02-22

【中文标题】从 Vue 应用程序到在 WAMP 上运行的 PHP API 的 axios 的 CORS 问题 [重复]

【英文标题】：CORS problem with axios from a Vue app to a PHP API running on WAMP [duplicate]

【发布时间】：2020-05-31 21:43:09

【问题描述】：

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

错误信息如下：

从源“http://localhost:8080”访问“http://localhost/myapp/api/test/1”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

如您所见，这是 CORS 的问题。在一些文档之后，这是我一直在做的修复它（仍然没有工作）。

axios 调用：

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

如果我在网络浏览器中访问http://localhost/myapp/api/test/1，我会收到回复。

我尝试将这行代码放入我的 PHP API 中，在我的入口点 (index.php) 中

header('Access-Control-Allow-Origin: *');

我配置了 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>

在 apache 的模块中激活了“headers_module”

重新启动一切，清除我的缓存，从另一个浏览器尝试...

还是不行，是不是漏了什么？

【问题讨论】：

您需要选择一种方法。您可以通过 Apache（您不需要额外的 Directory 指令，因为您的文档根目录已经是该文件夹），或者通过 PHP。如果您使用 PHP，则不需要 headers_module。实现其中一种方法后，检查实际的响应标头并查看是否设置了Access-Control-Allow-Origin。然后回来报告。

【参考方案1】：

我在 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();

【讨论】：

Albert Pinto 的答案解决了这个问题，但感谢您提供这段代码！我马上去整合它。

像魅力一样工作，100分！

【参考方案2】：

试试这个跨域扩展。

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc

【讨论】：

您可能发布了错误的链接，因为我看不出这与 CORS 有什么关系！

使用这个。 chrome.google.com/webstore/detail/moesif-orign-cors-changer/…