文章目录
  1. 1. AngularJS中的$http自定义headers之后的配置
    1. 1.1. 客户端需要设置 withCredentials
    2. 1.2. 服务器配置(express为例)
  2. 2. 跨域配置
    1. 2.1. 客户端不变
    2. 2.2. 服务器端
  3. 3. 参考文档
    1. 3.0.1. 文章若有纰漏请大家补充指正,谢谢~~

AngularJS中的$http自定义headers之后的配置

客户端需要设置 withCredentials

1
2
3
4
5
6
7
8
9
10
$http({
url: SERVERURL + '/',
method: 'GET',
// 此处是自定义的头
headers: {
'x-access-token': localStorage.getItem('token')
},
// 需要设置 withCredentials: true
withCredentials: true
})

服务器配置(express为例)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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请求
get请求

跨域配置

客户端不变

服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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://blog.xinshangshangxin.com SHANG殇

文章目录
  1. 1. AngularJS中的$http自定义headers之后的配置
    1. 1.1. 客户端需要设置 withCredentials
    2. 1.2. 服务器配置(express为例)
  2. 2. 跨域配置
    1. 2.1. 客户端不变
    2. 2.2. 服务器端
  3. 3. 参考文档
    1. 3.0.1. 文章若有纰漏请大家补充指正,谢谢~~