Specify header set depending on the HTTP referer

Question

I am working on two separete ReactJS project which are both making use of the PHP API. Both react project are running from the dev server on port 3000 and one on 3001. Because the ReactJS on these ports are going to the API on port 80 its triggering a invalid CORS request so I got round this originally by adding the following to my Apache File:

Header set Access-Control-Allow-Origin: "http://localhost:3000"

I now want to set it up so that I can set different Access Control Allow Origins based on whether the request is coming from http://localhost:3000 and http://localhost:3001.

I've tried the following but nothing I've tried seems to work:

<IfModule %{HTTP_REFERER} == "http://localhost:3001">
    Header set Access-Control-Allow-Origin: "http://localhost:3001"
</IfModule>

<IfModule %{HTTP_REFERER} == "http://localhost:3000">
    Header set Access-Control-Allow-Origin: "http://localhost:3000"
</IfModule>

But I get a CORS error stating that I've not specific an Access-Control-Allow-Origin header.

Is what I am trying to do possible and if so how I would I achieve what I am trying to do.

UPDATE

I've still been trying to figure this out, @ezra-s was right as I should have been using If not IfModule obviously but still not doing what I expect, so below is what I have now:

<If "%{HTTP_REFERER} == 'http://localhost:3001/'">
    Header set Access-Control-Allow-Origin: "http://localhost:3001"
</If>

<If "%{HTTP_REFERER} == 'http://localhost:3000/'">
    Header set Access-Control-Allow-Origin: "http://localhost:3000"
</If>

I've also updated the apache access log to show the referrer using the below log format:

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\"" common

And I see this the below in the apache access log

::1 - - [15/Aug/2020:14:55:38 +0100] "POST /supportportal_api/admin-login.php HTTP/1.1" 500 5495 "http://localhost:3001/"

So although the referrer in the Apache access log is matching my If statement but I am still getting the following error in chrome:

Access to fetch at 'http://localhost/supportportal_api/admin-login.php' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So it looks like for some reason my If statement isn't getting matched but can't see any reason why it wouldn't be.

You should either use reverse proxying to put both projects available via port 80, or change your APP so that it uses proper ports. Trickery that you have described in your question is a recipe for more subtle problems in the future. — Tero Kilkanen, Aug 10 '20 at 05:59
Its only during the development phase - this isn't how it works in production, ReactJS just uses a development server on port 3000 and then keep incrementing. The actual ReactJS isn't served by Apache itself its a Node Dev Server. Apache is only serving the PHP API NOT the React JS projects — Boardy, Aug 10 '20 at 17:50
If your development environment doesn't match the production environment, then you are creating one more source of possible issues you can see in production, but things work at dev. I recommend you to apply same kind of setup as in production. — Tero Kilkanen, Aug 10 '20 at 18:25
Sorry but I don't think you know how React development works. Its fairly standard that the development doesn't use Apache and it uses the built in Node development server. Once the development is done, a production build is done which can then be served as a standard website on Apache — Boardy, Aug 10 '20 at 20:41
So your environment is not standard after all, since you are using Apache too? If you are developing with the Node development server, why don't you serve all assets from it? If your production system doesn't need the CORS headers, you shouldn't add additional complexity to your development environment for those either. Keep things simple. — Tero Kilkanen, Aug 10 '20 at 20:48
Apache is just server for the PHP API, that's not using Node. Node is only being used for the frontend ReactJS project — Boardy, Aug 10 '20 at 20:50
In that case, Apache and reverse proxying the Node.js is the best solution. — Tero Kilkanen, Aug 10 '20 at 20:56
@ezra-s sorry for the delay in getting back to you, your right I should have used If not IfModule, but still seem to be getting the same issue. I've updated the question — Boardy, Aug 15 '20 at 14:06
I would also try with "always" modifier just in case `Header always set ...` — ezra-s, Aug 17 '20 at 10:47
@ezra-s Thanks that was the trick. Not sure why in this case it needs always though, never needed to use that before — Boardy, Aug 17 '20 at 16:52
@Boardy don't worry about it, for some reason I never remember its use cases so if it doesn't work I try adding it. :) — ezra-s, Aug 17 '20 at 20:06

Specify header set depending on the HTTP referer

0 Answers0