Help configuring cors plug for phoenix, react app nginx

Questions / Help
,
1

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

  1. 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”]

  1. cors plug in endpoint

plug CORSPlug

  1. 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)]
]

  1. React app config

ROOT_URL = “http://localhost:4001”
WS_ROOT_URL = “ws://localhost:4001”

  1. 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.

2

Did you find a solution?

3

is it “allow_headers” or “headers” ?

4

@Maz, Sorry for late reply. Was busy with work. No, I could not find any solution. I ended up having phoenix serve the static files. I stumbled upon this article Modern Webapps with React, Phoenix, Elixir and TypeScript and changed my code. It serves our purpose now.

5

@xgeek116 , It is “headers”

6

Interesting article, thanks.