Hi All,
I am struggling with deploying my Phoenix app with react frontend on nginx webserver. When I turn on https, i keep getting
Blocked loading mixed active content
My react app is running on port http://localhost:3001, phoenix is running on http://localhost:4001
Here are my configurations
- Phoenix config file
config :cors_plug,
origin: [“http://localhost:3001”],
allow_headers: [“accept”, “content-type”, “authorization”],
allow_credentials: true,
log: [rejected: :error, invalid: :warn, accepted: :debug],
max_age: 86400,
methods: [“GET”, “POST”]
- cors plug in endpoint
plug CORSPlug
- Phoenix dev.exs
config :app, AppWeb.Endpoint,
http: [port: 4001],
debug_errors: true,
code_reloader: true,
check_origin: false,
watchers: [
# node: [“node_modules/webpack/bin/webpack.js”, “–watch”, “–colors”,
# cd: Path.expand(“…/assets”, DIR)]
]
- React app config
ROOT_URL = “http://localhost:4001”
WS_ROOT_URL = “ws://localhost:4001”
- Nginx config with reverse proxy
root /var/www/app/frontend/build;
server {
server_name localhost;
client_max_body_size 26M;
location /graphql {proxy_pass http://localhost:4001; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection keep-alive; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }
location / {
try_files $uri $uri/ /index.html = 404;
}
}
I am able to get the app working for http. As soon as I turn on https, I could not get it to work. I keep getting CORS errors. I honestly don’t know where I am doing wrong.
Any help will be very appreciated.