Windows+php studio+Apache set the method to allow cross domain requests

Recently, while developing a vue3 project, I encountered the problem that axios requests cross domains when developing and testing locally. The address of vite local development preview is“ http://localhost:3000/ ”The local web address of phpstudy is“ http://localhost:80 ”。

The console will report an error, and Firefox will report an error as follows:

Intercepted cross source request: The same origin policy prohibits reading remote resources at the "request url". (Cause: CORS header is missing 'Access Control Allow Origin'). Status code: 301.

Google Browser reported the following error:

Access to XMLHttpRequest at '"request url"' from origin '"local url"' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

Go online to search“ Vite cross domain ”、“ Vue cross domain ”Or“ Apache cross domain ”The setup of multiple tutorials failed. Because everyone's computer environment is different, I wrote this article and added the computer environment after the final setup was successful key word 。

The development computer is Windows 11, the php environment uses the php studio panel, and the server application is Apache 2.4. The specific steps for setting cross domain requests are as follows:

1: Open "C: phpstudy_pro Extensions Apache 2.4.39 conf httpd. conf", find "# LoadModule headers_module modules/mod_headers. so", and remove the comprehensive "#";

2: Open "C: phpstudy_pro Extensions Apache 2.4.39 conf vhosts\ domain name . conf ", add the following code:

Header add Access-Control-Allow-Origin *

Header add Access-Control-Allow-Methods *

Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"

After adding, it is shown in the following figure:

Finally, go to the phpstudy panel and restart the Apache service. Cross domain configuration is allowed