title: Cordova - Refused to connect to api from device (Content Security Policy)
body: <p>I am working with Visual Studio's Tools for Apache Cordova.</p>
  
  <p>When I build the app with Ripple, all is well. But when I build it to my android device, the app refuses to connect to my external API.</p>
  
  <p>This is the error in the JavaScript Console log:</p>
  
  <blockquote>
    <p>Refused to connect to '<a href="http://XXX.herokuapp.com/api/posts/0/5" rel="nofollow">http://XXX.herokuapp.com/api/posts/0/5</a>' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: <a href="https://ssl.gstatic.com" rel="nofollow">https://ssl.gstatic.com</a> 'unsafe-eval'". </p>
    
    <p>Note that 'connect-src' was not explicitly set, so 'default-src' is
    used as a fallback.</p>
  </blockquote>
  
  <p>And:</p>
  
  <blockquote>
    <p>Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to
    connect to 'http:// XXX. herokuapp. com/api/posts/0/5'</p>
  </blockquote>
  
  <p>My API is built with Node.js and express. There is Access-Control-Allow-Headers in my server.js, but it still doesn't work on my device.</p>
  
  <p><strong>Server.js:</strong></p>
  
  <pre><code>//'use strict';
  
  var express    = require('express');        // call express
  var app        = express();                 // define our app using express
  var bodyParser = require('body-parser');
  var methodOverride = require('method-override');
  var router = express.Router();
  var fs = require('fs');
  var path = require('path');
  
  app.use(bodyParser.json()); // parse application/json
  app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
  app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded
  app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
  
  app.use(express.static(__dirname + '/www')); 
  
  // middleware to use for all requests
  
  app.use(function (req, res, next) {
      console.log('in middleware');
  
      res.setHeader('Access-Control-Allow-Origin', '*');//allowing ripple's localhost get access to node's localhost(5432).
      console.log(req.header);
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers',"X-Requested-With,Content-Type");
      //res.setHeader('Access-Control-Allow-Credentials', true);
      // Pass to next layer of middleware
      next();
  });
  
  
  require('./app/routes')(app); // pass our application into our routes -- must
  app.use('/api', router);//put this line beofre passing app to routes.js for it to take effect.
  
  var port = process.env.PORT || 8080;
  app.listen(port, function() {
    console.log("Listening on " + port);
  });
  
  exports = module.exports = app;   // expose app
  </code></pre>
  
  <p>I have also tried adding a meta tag to my index.html file, but with no success.</p>
  
  <pre><code>&lt;meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:8080 http://XXX.herokuapp.com"&gt;
  </code></pre>
  
  <p>Any ideas what might be the problem?</p>