SLIM php Angularjs CORS - angularjs

I'm using SLIM framework as backend and Angularjs as frontend.Normal GET and POST API's is working fine.Whenever i pass the headers in GET or POST method it is throwing 404 error.I used the .htaccess file for CORS.
RewriteEngine On
# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /
Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Headers: "origin, x-requested-with, content-type, authorization"
Header add Access-Control-Allow-Methods: "PUT, GET, POST, DELETE, OPTIONS"
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
Please help me to fix this.

If you use Chrome, you can open the network tab within the Developer Tools to view the failed request. If it's related to CORS, then it will tell you why it failed.
A 404 error usually means that the endpoint cannot be found, so check carefully that the Angular code is requesting the URL that you think it should be.

Related

React app CORS error when after deployment

I developed a system with REACT and Express.
It works well in local.
When I deployed to CPanel, I got 404 error for sub routers refreshing, so I added .htaccess like this.
<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
</IfModule>
After I added this, I got a CORS error when I call backend API with axios.
Please help me.
UPDATE
If I add .htaccess, I got this error.
Access to XMLHttpRequest at 'https://api.lightcoin.io/api/history?user=0x1C09d124d6c03EF63B1e0C3D1Af1b2eFE628ceE8' from origin 'https://lightcoin.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
If I remove .htaccess, it works well, but when the page of sub-router is refreshed, I got 404 error.

How can I refuse to serve index.html if the request comes with an incorrect Origin?

I'm developing a Chatbot with a React frontend, an Apache server and a load balancer on top of it. I added CORS configuration on Apache like so on the appropriate VirtualHost:
Require all granted
Header always set Access-Control-Allow-Origin "myURL"
Header always set Access-Control-Allow-Methods "POST,GET,PUT"
Header always set Access-Control-Max-Age "3600"
Header always set Access-Control-Allow-Headers "Authorization"
Header always set Access-Control-Expose-Headers "Authorization"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
Whenever I make a request with a different Origin, I get the CORS headers, but it also returns 200 and the page contents. How can I make it so it returns a 401 and nothing on the body?
Is there anything I can do application-side? What about on Apache?
I'm aware of the security risks, but if someone ever needs to do this, it's actually quite simple.
You can use mod_rewrite or If..Else statements and add it to a .htaccess file or httpd.conf. Here's the solution with If..Else:
<If "%{HTTP:Origin} in { 'yourURL' }">
Require all granted
</If>
<ElseIf "%{HTTP:Origin} == ''">
Require all granted
</ElseIf>
<Else>
Require all denied
</Else>
I also allowed requests without Origin, but you can just remove the ElseIf otherwise.

How to tackle CORS issues with ReactJS

I have my backend running at a subdomain. Everything worked fine when my site ran on http protocol. But as soon as I moved the site to https my POST requests stopped working. Following was the error I got at my console.
Access to XMLHttpRequest at 'https://backend.example.com/api/handle-enquiry/' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
My GET requests are working fine.
Note: I checked my network request headers using firefox's developer tools It shows 404 for preflight OPTIONS request.
I tried putting the following code into my .htaccess file
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
RESOLVED: But I am still confused about the solution. I just changed the way of configuring headers. Earlier I placed them in my index.php file of laravel backend. Now I am just configuring them at my .htaccess file. How does it make any difference? What am I missing?
Follows my updated .htaccess configuration
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
need to set it to always
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
taken from: https://serverfault.com/questions/231766/returning-200-ok-in-apache-on-http-options-requests

CORS headers not working even after adding in .config file

I am working in AngularJs and making certain cross origin requests for accessing data and all stuff.
For the same,I added the required headers in the 000-default.config file of Apache Server to allow Cross Origin Requests but it isn't working.
It keeps returning the same error 'XMLHttpRequest cannot load 'domain-name'. No 'Access-Control-Origin' header present and blah blah..
I tried putting the headers inside the <IfModule mod_headers.c></IfModule> but still no difference in output.
I restarted the server too after every attempt. if thats what you are thinking :P
000-default.config file
<VirtualHost *:8081>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, content-type, Accept"
Header set Access-Control-Allow-Credentials "true"
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>
<Directory />
Options FollowSymLinks
AllowOverride All
</Directory>
</VirtualHost>
After searching for answers i came across adding CORS chrome extension and disabling web security which made it work perfectly but what should I do for production purposes because no one would add extensions and disable security?
EDIT
The CORS problem is solved.I dont know how but it happened. I guess i restarted the system so it happened but still there is one issue left.
It works when we add --disable-web-security in chrome properties.This works fine in case of development. But how should i go about solving this for production purposes?
Please Help..

Response for preflight has invalid HTTP status code 401 [duplicate]

I am working on a project that integrates WooCommerce with Ionic 3 and I am having problems with the signup and checkout functionality. I am able to read products and login from my WooCommerce site, but every time I do a post request, I am getting these errors:
{"errors":[{"code":"woocommerce_api_authentication_error","message":"Invalid signature - provided signature does not match."}]}
How can I fix it?
Make sure you have the following code in your .htaccess file on the top. You can find this file in the root of your WordPress.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $l [R=200,L]
Also enable CORS on your browser.

Resources