Question

我正在使用Visual Studio的Apache Cordova工具。

当我使用Ripple构建应用程序时，一切都很好。但是当我将它构建到我的Android设备时，应用程序拒绝连接到我的外部API。

这是JavaScript控制台日志中的错误：

拒绝连接到“http://XXX.herokuapp.com/api/posts/0/5”，因为它违反了以下内容安全策略指令：“default-src'self'data：gap：https://ssl.gstatic.com'unsafe-eval'”。

请注意，'connect-src'未明确设置，因此'default-src'是   用作后备。

和

错误：无法在'XMLHttpRequest'上执行'open'：拒绝执行连接到'http：// XXX。 herokuapp。 COM / API /帖/ 0 / 5'

我的API是使用Node.js和express构建的。我的server.js中有Access-Control-Allow-Headers，但它仍无法在我的设备上运行。

Server.js：

//'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

我还尝试在我的index.html文件中添加元标记，但没有成功。

<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">

任何想法可能是什么问题？

Answer 1

来自错误消息。您正在JS中调用Ajax请求。但是您只在http://XXX.herokuapp.com之后添加了script-src，它只允许加载脚本内容。要允许Ajax请求，需要在http://XXX.herokuapp.com之后添加connect-src，如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; connect-src 'self' http://XXX.herokuapp.com; style-src 'self' 'unsafe-inline'; media-src *">

或者，您可以在default-src之后添加URL，该URL设置允许所有内容的默认策略（加载脚本/ CSS内容，Ajax请求等）。所以meta标签应该是这样的：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://XXX.herokuapp.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

有关内容安全政策的详细信息，请参阅Content Security Policy Reference。

Cordova - 拒绝从设备连接到api（内容安全策略）

1 个答案: