AngularJS踩坑(2)
2015-06-17 13:36
489 查看
AngularJS中的$http自定义headers之后的配置
客户端需要设置 withCredentials
$http({ url: SERVERURL + '/', method: 'GET', // 此处是自定义的头 headers: { 'x-access-token': localStorage.getItem('token') }, // 需要设置 withCredentials: true withCredentials: true })
服务器配置(express为例)
router // angular为首先发送用OPTIONS方法(做是的是预检查,从服务器确认是否可以继续) .options('/', function(req, res) { // 设置 Credentials 为允许 res.setHeader('Access-Control-Allow-Credentials', true); // 设置 Methods res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); // 添加允许的请求头类型!! res.setHeader("Access-Control-Allow-Headers", 'x-access-token, Content-Type'); res.send(200); }) // 使下面的get请求可以返回(配置和上面一样) .use(function(req, res, next) { res.setHeader('Access-Control-Allow-Credentials', true); res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); res.setHeader("Access-Control-Allow-Headers", 'x-access-token'); next(); }) // 真正的请求 .get('/', function(req, res) { // doSomething });
跨域配置
客户端不变
服务器端
.options('/', function(req, res) { // 添加 Access-Control-Allow-Origin, 其它不变 // 注意这里不能使用 * res.setHeader('Access-Control-Allow-Origin', req.headers.origin); res.setHeader('Access-Control-Allow-Credentials', true); res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); res.setHeader("Access-Control-Allow-Headers", 'x-access-token, Content-Type'); res.send(200); }) .use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', req.headers.origin); res.setHeader('Access-Control-Allow-Credentials', true); res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); res.setHeader("Access-Control-Allow-Headers", 'x-access-token'); next(); }) .get('/', function(req, res) { // doSomething });
请求的时候不能使用localhost,请上传服务器在尝试跨域
参考文档
http://camnpr.com/server/2007.htmlhttp://blog.csdn.net/ligang2585116/article/details/44806853
文章若有纰漏请大家补充指正,谢谢~~
http://blog.xinshangshangxin.com SHANG殇相关文章推荐
- AngularJS学习笔记一:简单入门
- Angular - ng-repeat高级用法
- 举例简介AngularJS的内部语言环境
- 详解AngularJS中自定义指令的使用
- 详解AngularJS中的依赖注入机制
- 详解AngularJS中的作用域
- 简介AngularJS中使用factory和service的方法
- 简介AngularJS的视图功能应用
- 在AngularJS中使用AJAX的方法
- 使用AngularJS来实现HTML页面嵌套的方法
- AngularJS的表单使用详解
- AngularJS笔记---注册服务
- 举例讲解AngularJS中的模块
- 简介AngularJS的HTML DOM支持情况
- AngularJs基础总结(1.4版本)
- 举例讲解AngularJS中的模块
- AngularJS的表单使用详解
- 使用AngularJS来实现HTML页面嵌套的方法
- 在AngularJS中使用AJAX的方法
- 简介AngularJS的视图功能应用