从Vue应用到WAMP上运行的PHP API的axios的CORS问题 [英] CORS problem with axios from a Vue app to a PHP API running on WAMP

问题描述

我无法通过axios发出XHR请求，将其从Vue应用程序转换为在WAMP上运行的PHP API.

I have trouble making an XHR request with axios from a Vue app to a PHP API running on WAMP.

错误消息如下:

通过' http://localhost/myapp/api/test/1 '源自原点' http://localhost:8080 '已被CORS政策阻止:对预检请求的响应没有t通过访问控制检查:所请求的资源上没有"Access-Control-Allow-Origin"标头.

Access to XMLHttpRequest at 'http://localhost/myapp/api/test/1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如您所见，这是CORS的问题.在整理了一些文档之后，这就是我正在做的修复工作(仍然无法正常工作).

As you can see, it's a problem with CORS. After some documentation, here is what I have been doing to fix it (still not working).

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 我的网络浏览器，得到了回应.

If I visit http://localhost/myapp/api/test/1 in my web browser, I got my response.

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

I attempted putting this line of code in my PHP API, in my entry point (index.php)

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

我配置了WAMP:

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

Changed httpd-vhosts.conf and 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"

  • Activated the "headers_module" in apache's modules

    重新启动所有内容，清除缓存，从其他浏览器尝试...

    Rebooted everything, cleared my cache, tried from another browser ...

    仍然无法正常工作，我是否缺少某些东西?

    Still not working, am I missing something ?

    推荐答案

    我在index.php文件顶部使用它来解决CORS问题:

    I use this at the top of my index.php file to fix CORS problems:

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

    这篇关于从Vue应用到WAMP上运行的PHP API的axios的CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！