title: Nginx setup for angular app with node API
body: <p>I have been building API using express and front end using angular. Both are in different directory named <code>/var/www/apps/client</code> and <code>/var/www/apps/server</code>.  </p>
  
  <p>I want to deploy my application using nginx as a webserver. I am able to host angular application but when trying to request my API getting following error on browser.</p>
  
  <p><code>Mixed Content: The page at 'https://xxx.xxx.xxx.xxx/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx.xxx.xxx.xxx:3000/api/videos'. This request has been blocked; the content must be served over HTTPS.</code> </p>
  
  <p>Nginx config  </p>
  
  <pre><code>server { 
    listen  80;
    server_name localhost;
    access_log /var/log/client/access.log;
    error_log  /var/log/client/error.log;
    root /var/www/apps/client/dist;
    charset utf-8;
  
     location / {
      rewrite ^ https://$host$request_uri? permanent;
     }
   }
  server {
    listen        443 ssl;
    server_name  localhost;
    access_log /var/log/client/access.log;
    error_log  /var/log/client/error.log;
    ssl_certificate       /etc/nginx/ssl/nginx.crt;
    ssl_certificate_key   /etc/nginx/ssl/nginx.key;
  
    keepalive_timeout 5;
    root /var/www/apps/client/dist;
    charset utf-8;
  
    location ~ ^/(scripts.*js|styles|images) {
      gzip_static on;
      expires 1y;
      add_header Cache-Control public;
      add_header ETag "";
  
      break;
    }
  
    location / {
      try_files $uri /index.html;
    }
  }
  </code></pre>
  
  <p>My express server code - </p>
  
  <pre><code>var express = require("express"),
    app = express(),
    mongoose = require("mongoose"),
    config = require("./config");
  
  app.set("appPath", config.root);
  
  mongoose.connect(config.mongo.uri, config.mongo.options);
  
  app.use(function (req, res, next) {
    "use strict";
  
    // Website you wish to allow to connect
    res.setHeader("Access-Control-Allow-Origin", "*");
    // Request methods you wish to allow
    res.setHeader("Access-Control-Allow-Methods",
      "GET, POST, OPTIONS, PUT, PATCH, DELETE");
  
    // Request headers you wish to allow
    res.setHeader("Access-Control-Allow-Headers",
      "X-Requested-With,content-type,api_key,adminid,userid");
  
    // Set to true if you need the website to include cookies in the    requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader("Access-Control-Allow-Credentials", true);
  
    // Pass to next layer of middleware
    next();
  });
  
  app.use(function (req, res, next) {
    "use strict";
  
    next();
  });
  
  
  require("./routes")(app);
  app.listen(config.port);
  
  console.log("Listening on port " + config.port)
  </code></pre>
  
  <p>Serving API at <code>3000</code> port. I found this <a href="https://stackoverflow.com/questions/24528955/if-possible-use-nginx-to-redirect-by-location-to-node-app">If possible use nginx to redirect by location to node app?</a><br>
  But this is also not working. Any kind of help would be great.</p>