Angularjs 在Ionic应用程序中同时使用CORS和CSRF
我正在使用AngularJS网站开发一个android应用程序。由于我的web应用程序中已经运行了服务器代码,所以我选择了Ionic作为UI并在需要时调用服务器,但我的开发环境中存在一些问题Angularjs 在Ionic应用程序中同时使用CORS和CSRF,angularjs,spring-security,cors,ionic-framework,csrf,Angularjs,Spring Security,Cors,Ionic Framework,Csrf,我正在使用AngularJS网站开发一个android应用程序。由于我的web应用程序中已经运行了服务器代码,所以我选择了Ionic作为UI并在需要时调用服务器,但我的开发环境中存在一些问题 当我使用Ionic serve运行我的应用程序时,我需要使用它向服务器发出请求 我的web应用程序是使用带有Spring Security的CSRF令牌开发的 我使用的配置方式如下: private void initCORSFilter(ServletContext servletContext, Enu
private void initCORSFilter(ServletContext servletContext, EnumSet<DispatcherType> disps) {
FilterRegistration.Dynamic corsFilter = servletContext.addFilter("cors", new CorsFilter());
Map<String, String> parameters = new HashMap<>();
parameters.put("cors.allowed.origins", "http://localhost:3000");
parameters.put("cors.allowed.headers", "x-auth-token, x-requested-with, Content-Type, Accept, cache-control, x-csrf-token, Origin, Access-Control-Request-Method, Access-Control-Request-Headers");
parameters.put("cors.allowed.methods", "POST, PUT, GET, DELETE");
parameters.put("cors.exposed.headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials");
parameters.put("cors.support.credentials", "true");
corsFilter.setInitParameters(parameters);
corsFilter.addMappingForUrlPatterns(disps, true, "/*");
}
然后我尝试向本地服务器发送post请求:
angular.module('consamiApp')
.factory('Register', function ($resource) {
//globalURL is https://localhost:8080
return $resource(globalURL+'api/register', {}, {
});
});
.
.
.
createAccount: function (account, callback) {
var cb = callback || angular.noop;
return Register.save(account,
function () {
return cb(account);
},
function (err) {
this.logout();
return cb(err);
}.bind(this)).$promise;
}
但是,我在firefox控制台中收到了以下消息:
跨源锁定请求:同源策略(同源策略)阻止在中读取远程资源。(原因:CORS标题“访问控制允许原点”不存在)
新信息
当我提交我正在测试的表单时,AngularJs向服务器发出2个CORS请求:OPTIONS和POST,请求的结果是200 OK和403禁止。以下是两个请求和响应的标题:
选项请求标题:
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
选项答案标题:
Access-Control-Allow-Origin: http://localhost:3000
Content-Length: 0
Date: Tue, 30 Jun 2015 22:07:58 GMT
Server: Apache-Coyote/1.1
Set-Cookie: JSESSIONID=485A653AEAC8B8756DD3057BBF7FB862; Path=/; Secure; HttpOnly
CSRF-TOKEN=e8b3396c-63b2-47bf-9ad6-c1454628eb3b; Path=/
X-Application-Context: application:dev:8080
access-control-allow-credentials: true
access-control-allow-headers: origin,access-control-request-headers,x-requested-with,x-csrf-token,content-type,access-control-request-method,cache-control,x-auth-token,accept
access-control-allow-methods: POST
access-control-max-age: 1800
POST请求标头:
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: application/json, text/plain, */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Content-Type: application/json;charset=utf-8
Referer: http://localhost:3000/
Content-Length: 109
Origin: http://localhost:3000
Cookie: _ga=GA1.1.123103160.1428358695; connect.sid=s%3AwD4KP4WBfhGO0JpFND3LpCzW.augts9fos9NMaZw%2B7XrNuilgaM8ocwSxaEUeDlIaVJ4; JSESSIONID=93200F4F4AFCEB28F10B130841808621
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
发布答案标题:
Content-Type: application/json;charset=UTF-8
Date: Tue, 30 Jun 2015 22:07:58 GMT
Server: Apache-Coyote/1.1
Transfer-Encoding: chunked
有什么我没注意到的吗?他说我在部署应用程序时不应该担心CORS问题,但是至少在测试中,我真的需要解决这个问题。您能给我一些选项吗?当我编辑这个问题并看到带有HttpOnly子句的选项响应标题时,我开始相信问题出在我在开发环境中使用的自签名证书上 设置Cookie:JSESSIONID=485A653AEAC8B8756DD3057BBF7FB862;路径=/;保护HttpOnly
因此,我决定在web服务器中禁用https协议,它可以正常工作。谢谢你的帮助。CORS规范要么全有要么全无。它只支持*、null或确切的域:
我认为您不能将端口号指定为其值。自Cordova 5.0.0以来,您是否安装并配置了CORS查询所必需的端口号 安装它:
cordova plugin add cordova-plugin-whitelist
配置config.xml
您可以使用*保持当前设置,也可以更改以获得更严格的规则
添加html策略
在index.html上,还应添加策略。
要授权所有内容,请参见:
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'
'unsafe-eval'"
您将在其中看到cordova插件白名单
其次,您可能需要将with credentials
添加到$http
(因此也是$resource)查询中:
.config(function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
});
如果您没有使用ionic生成项目,那么@aofevre很可能是正确的。如果你使用爱奥尼亚,他们现在会将插件加入到项目中。你在哪里看到爱奥尼亚将cordova插件白名单包装起来的?到目前为止,我看到它应该手动安装(),我已经在响应中添加了cordova命令来验证白名单插件是否安装良好;但我仍然找不到任何迹象表明爱奥尼亚是否已经包含了这个插件;)如果您运行ionic start test blank(启动一个新的空白ionic项目),请查看插件文件夹!砰!正如@JessPatton告诉我们的,白名单插件是默认安装在爱奥尼亚的。我添加了meta标签,但是结果是一样的。我已经在问题中添加了请求的头,也许有什么我没有看到的。我已经转义:根据如何设置这个JSSessionID,使用字符表示端口
cordova plugins
.config(function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
});