Cordova - 拒绝从设备连接到 api（内容安全策略）
Cordova - Refused to connect to api from device (Content Security Policy)
我正在使用 Visual Studio 的 Apache Cordova 工具。
当我使用 Ripple 构建应用程序时，一切都很好。但是当我将它构建到我的 android 设备时，该应用程序拒绝连接到我的外部 API.
这是 JavaScript 控制台日志中的错误：
Refused to connect to 'http://XXX.herokuapp.com/api/posts/0/5' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'".
Note that 'connect-src' was not explicitly set, so 'default-src' is
used as a fallback.
并且：
Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to
connect to 'http:// XXX. herokuapp. com/api/posts/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">
任何想法可能是什么问题？
来自错误信息。您在 JS 中调用 Ajax 请求。但是你只在script-src后面加了http://XXX.herokuapp.com，这样只允许加载脚本内容。要允许 Ajax 请求，需要在 connect-src 之后添加 http://XXX.herokuapp.com，如下所示：
<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，它设置了允许一切的默认策略（加载 script/CSS 内容，Ajax 请求等） .所以元标签应该是这样的：
<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。
我正在使用 Visual Studio 的 Apache Cordova 工具。
当我使用 Ripple 构建应用程序时，一切都很好。但是当我将它构建到我的 android 设备时，该应用程序拒绝连接到我的外部 API.
这是 JavaScript 控制台日志中的错误：
Refused to connect to 'http://XXX.herokuapp.com/api/posts/0/5' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'".
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
并且：
Error: Failed to execute 'open' on 'XMLHttpRequest': Refused to connect to 'http:// XXX. herokuapp. com/api/posts/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">
任何想法可能是什么问题？
来自错误信息。您在 JS 中调用 Ajax 请求。但是你只在script-src后面加了http://XXX.herokuapp.com，这样只允许加载脚本内容。要允许 Ajax 请求，需要在 connect-src 之后添加 http://XXX.herokuapp.com，如下所示：
<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，它设置了允许一切的默认策略（加载 script/CSS 内容，Ajax 请求等） .所以元标签应该是这样的：
<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。