How to fix CORS error when Node API calls through Apache server

Question

I added a virtual host abc.local for 127.0.0.1

Angular app is running on localhost:4000
PHP API on localhost:80
Node 1 API on localhost:4060
Node 2 API on localhost:3001

PHP files are inside the /admin/webp folder, Node files are inside the /admin/webp/v2 and /admin/webp/v1 folder respectively.

Below is the .htaccess file

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Credentials "true"
    Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding, X-Auth-Token, content-type"
</IfModule>


<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_HOST} ^abc.local$
    RewriteRule ^admin/webp/v2/(.*)$ http://localhost:4060/$1 [L,R=301]
    RewriteRule ^admin/webp/v1/(.*)$ http://localhost:3001/v1/$1 [L]
</IfModule>

All rewrite rules are just working fine. For example all calls to abc.local/webp/v2/users are redirected to localhost:4060/users.

However browser throws CORS error because of the rule

RewriteRule ^admin/webp/v2/(.*)$ http://localhost:4060/$1 [L,R=301]

Apache Server responds OPTIONS request to the node application with a 301 redirect (browser is expecting a 200). Is there any workaround to fix this?

Navaneeth V · Accepted Answer · 2022-08-13 08:07:47Z

0

If anyone facing the same trouble, just replace [L,R=301] with [L,P] (Requests are treated as proxy rather than redirect). It will fix the problem.

RewriteRule ^admin/webp/v2/(.*)$  http://localhost:4060/$1 [L,P]

RewriteRule ^admin/webp/v1/(.*)$  http://localhost:3001/v1/$1 [L,P]

edited Aug 13, 2022 at 8:07

answered Aug 13, 2022 at 7:57

Navaneeth V

114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Heiko Theißen · Accepted Answer · 2022-08-13 08:12:50Z

0

(Your question lacks some details, therefore forgive me if I made wrong assumptions.)

If your app wants to make a cross-origin request to http://abc.local/admin/webp/v2/users, a request header like Content-Type: application/json will cause the browser to first make a preflight request

OPTIONS http://abc.local/admin/webp/v2/users
Origin: http://localhost:4000
Access-Control-Request-Headers: Content-Type
... more Access-Control-Request-* headers ...

Because of

RewriteRule ^admin/webp/v2/(.*)$ http://localhost:4060/$1 [L,R=301]

the Apache Server responds to this OPTIONS request with a redirection

HTTP/1.1 301 Moved Permanently
Location: http://localhost:4060/admin/webp/v2/users
Access-Control-Allow-Origin: *
... other Access-Control-Allow-* headers ...

To prevent this, you could extend the RewriteCond so that it excludes OPTIONS requests from rewriting and respond to them with 200 OK.

edited Aug 13, 2022 at 8:12

answered Aug 13, 2022 at 7:42

Heiko Theißen

18.2k2 gold badges14 silver badges50 bronze badges

2 Comments

Navaneeth V Over a year ago

If you exclude OPTIONS abc.local/admin/webp/v2/users requests then browser will throw 404

Navaneeth V Over a year ago

I liked your detailed explanation. I will update my question accordingly. Eventhough I got the right answer.

Collectives™ on Stack Overflow

How to fix CORS error when Node API calls through Apache server

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related