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?

Your .htaccess is not valid. A lot of the quotes are wrong and/or missing. Correct syntax is: Access-Control-Allow-Origin: * (no quotes). Did you take a look in the apache log? — Frieder, Jun 15 '20 at 08:52
bro thanks for replying. I am beginner to this platform. Can you send me correct syntax of htaccess file — VKD, Jun 15 '20 at 09:37

score 0 · Answer 1 · answered Jun 15 '20 at 11:19

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.

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

1 Answers1