AngularJS使用$http出现options请求

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请求

options请求

get请求

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殇