时间戳

首页 > 解决方案 > 通过 axios 请求调用 php 文件已被 VUE CLI 3 中的 CORS 策略阻止

php - 通过 axios 请求调用 php 文件已被 VUE CLI 3 中的 CORS 策略阻止

问题描述

我在 vue cli 3 中通过 axios get 方法调用 php 文件。我的服务器：节点 js 和 wamp 服务器我的应用程序（节点）路径http://localhost:8080/ 和我的WAMP路径http://localhost:80。

现在我得到了has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource，我看到了https://cli.vuejs.org/config/#devserver-proxy但它对我不起作用。

在我的vue.config.js

module.exports = { devServer: { proxy: 'http://localhost/' } }

和我在视图文件夹中的 PHP 文件路径 http://localhost:80/blog/src/views/php/imageUpload.php

我需要知道我在哪里做错了。

这是我得到的错误： 点击查看我的错误

这是我的代码： 点击查看我的axios代码图片

标签： phpnode.jsvue.jscommand-line-interfacewampserver

解决方案

CORS 机制用于强制客户端请求来自与默认部署服务器的域属于同一域的应用程序。换句话说，它是为了确保我们自己的应用程序只是访问我们 API 的应用程序并防止属于其他域的应用程序访问它。在您的情况下，客户端应用程序和服务器应用程序使用不同的端口。这打破了规则

请求是从运行在 8080 的应用程序向运行在 80 的服务器 API 发起的，尽管它们在同一个 localhost 中运行。端口不同。这就是引发 CORS 错误的原因。

请在您的 PHP 应用程序中将标头设置Access-Control-Allow-Origin为localhost:8080允许跨域请求。

请在此处阅读 CORS 机制的功能概述

推荐阅读