如何在 Vue3 + Vite 开发服务器中运行 php 脚本

Question

I am making a small project in Vue3 using the recommended dev server setup http://localhost:5173. The files are all on a linux apache web server in /var/www/html/etc.. but php scripts won't run from within localhost:5173.

When I try to access the php files directly:

await fetch('http://localhost/vue-project/src/php/test.php', {method: 'GET'})

I get the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

Can anyone help me with a solution to this please?

Answer 1

I found a solution here: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at url

..is to access the php script using the full url (http://localhost/etc...) and to put the following lines of code at the top of any php script:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Because this is just for the purposes of getting the php to work whilst 'npm run dev', after 'npm run build' you could then remove those lines of code and just change the javascript to reference the php files directly.

Any other recommendations would be welcome.