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

Question

我正在通过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/' } }

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

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

这是我得到的错误：

这是我的代码：

Answer 1

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

这些请求是从运行在8080的应用程序启动到运行在80的服务器API的，尽管它们在同一本地主机中运行。端口不同。这就是引发CORS错误的原因。

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

Please read the Functional overview of CORS mechanism here