Angular 8 with php and mysql database Cross-Origin Request Blocked:

Question

I am trying to build a login and register with angular 8 platform, with php and mysql database.

php and mysql uses localhost/ and angular 8 uses localhost:4200 .

I am trying to send data to mysql database but there is a error message in the console:

Cross-Origin Request Blocked:

To communicate between localhost/ and localhost:4200 i used this code

RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f    
RewriteRule ^([^\.]+)$ $1.php [NC,L]    

#Set the headers for the restful api 
Header always set Access-Control-Allow-Origin http://localhost:4200   
Header always set Access-Control-Max-Age "1000"   
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin,    Authorization,    
Header always set Access-Control-Allow-Origin "*"   
Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Access-Control-Allow-Origin"  
Header always set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 

but still I am getting this error. Is there anybody to help me?

Answer 1

From enable cors in .htaccess (this question is a duplicate.) You need to use add instead of set: Remove all the rules and replace by:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

The asterisk should be replaced by the correct domain in production mode.