Help needed getting React frontend/PHP backend talking - CORS issues
vvaswani
FREEOP

5 months ago

My setup (Railway internal networking names in braces):

  • Symfony API backend php-fpm container, exposed default port 9000 ("capi")

  • nginx-alpine container ("cproxy") configured to pass requests to php-fpm, exposed default port 80

  • React/vite frontend ("cweb"), exposed default port 5173

Railway configuration

  • Frontend has a VITE_API_URL env var with value https://cproxy

  • nginx-alpine container has a NGINX_FASTCGI_PASS env var with value capi:9000 - start.sh script takes care of interpolating this env var into the nginx conf file

Dockerfile for nginx-alpine container

```
FROM nginx:alpine

COPY default.conf.template /etc/nginx/conf.d/default.conf.template

COPY start.sh /start.sh

RUN chmod +x /start.sh

```

default.conf.template:

```
server {

listen 80;

server_name localhost;

root /var/www/html/public;

index index.php index.html;

location / {

if ($request_method = 'OPTIONS') {

add_header 'Access-Control-Allow-Origin' '*' always;

add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

add_header 'Access-Control-Max-Age' 1728000 always;

add_header 'Content-Type' 'text/plain; charset=UTF-8' always;

add_header 'Content-Length' 0 always;

return 204;

}

try_files $uri $uri/ /index.php?$query_string;

add_header 'Access-Control-Allow-Origin' '*' always;

add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

}

location ~ \.php$ {

fastcgi_pass ${NGINX_FASTCGI_PASS};

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

include fastcgi_params;

# Also apply CORS headers for PHP files

add_header 'Access-Control-Allow-Origin' '*' always;

add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;

}

error_log /var/log/nginx/project_error.log;

access_log /var/log/nginx/project_access.log;

}
```

Issues

  1. The frontend is unable to communicate with nginx. Error in browser Response body is not available to scripts (Reason: CORS Missing Allow Origin).

  2. If I add a public domain for the cproxy service at port 80 and browse to it, I can see the nginx welcome page. However accessing any api endpoint on the domain produces a 404.

Looking for help to get the communication working between these services. Thanks!

$10 Bounty

3 Replies

Railway
BOT

5 months ago

Hey there! We've found the following might help you get unblocked faster:

If you find the answer from one of these, please let us know by solving the thread!


jack
PRO

5 months ago

I’ve noticed your VITE_API_URL is set to https://cproxy, which won’t work in the browser. The cproxy hostname is only resolvable inside Railway’s private network, but your React frontend runs in the user’s browser, so it can’t see that.

If you wanted to use Railway’s private networking, you’d have to use plain http protocol instead of https, since there’s no TLS cert for internal hostnames. But in this case, because the frontend is client-side, you’ll need to point VITE_API_URL to the public domain on your cproxy service.


jack

I’ve noticed your VITE_API_URL is set to https://cproxy, which won’t work in the browser. The cproxy hostname is only resolvable inside Railway’s private network, but your React frontend runs in the user’s browser, so it can’t see that.If you wanted to use Railway’s private networking, you’d have to use plain http protocol instead of https, since there’s no TLS cert for internal hostnames. But in this case, because the frontend is client-side, you’ll need to point VITE_API_URL to the public domain on your cproxy service.

vvaswani
FREEOP

5 months ago

Thank you, I missed that! I've now added a public domain to the cproxy service and pointed VITE_API_URL to that public hostname. Now, when I browse to the public hostname:

Attachments


Loading...