Angularjs之如何在跨域请求中传输Cookie的方法

要在跨域请求中传输cookie，需要注意以下几点：

1. 后端服务需要设置允许跨域请求，并设置Access-Control-Allow-Credentials为true。例如，node.js中的跨域设置代码如下：

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  next();
});

1. 前端请求需要设置withCredentials为true。例如，在AngularJS中，可以通过$httpProvider.defaults.withCredentials = true; 设置全局默认值，也可以在$http请求中单独设置。示例代码如下：

$http({ 
  method: 'POST', 
  url: 'https://example.com/api/login', 
  data: {username: 'example', password: '123456'}, 
  withCredentials: true 
})

具体操作步骤：

1. 在后端设置允许跨域请求，并设置Access-Control-Allow-Credentials为true。
   例如，在node.js中可以使用cors包来实现跨域，示例代码如下：

安装cors包：npm install cors

跨域设置代码：

var express = require('express');
var cors = require('cors');
var app = express();

app.use(cors({
  origin: ['http://localhost:3000'],
  credentials: true
}));

以上代码表示只允许来自http://localhost:3000的请求，并允许跨域请求携带cookie。

1. 在前端设置withCredentials为true，并发送跨域请求。
   例如，在AngularJS中，可以通过以下代码实现：

$http({
  method: 'GET',
  url: 'http://example.com/resource',
  withCredentials: true
})

以上代码表示向http://example.com/resource发起GET请求，并允许跨域请求携带cookie。

1. 后端返回cookie，前端可以通过response.headers()方法获取到。例如，在AngularJS中，可以通过以下代码获取cookie：

$http({
  method: 'GET',
  url: 'http://example.com/resource',
  withCredentials: true
}).then(function(response) {
  var cookies = response.headers()['set-cookie'];
});

以上代码表示向http://example.com/resource发起GET请求，并获取cookie。

1. 将cookie发送到后端，可以在请求头中添加cookie信息，例如：

$http({
  method: 'POST',
  url: 'http://example.com/api/login',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Cookie': cookies.join(';')
  },
  transformRequest: function(obj) {
    var str = [];
    for(var p in obj) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
    return str.join("&");
  },
  data: {
    'username': 'example',
    'password': '123456'
  }
})

以上代码表示发送POST请求到http://example.com/api/login，请求头中包含cookie信息，请求体中为表单数据。

1. 如果后端返回带cookie的响应，前端也可以通过response.headers()方法来获取cookie信息。例如，在AngularJS中，可以通过以下代码获取cookie：

$http({
  method: 'POST',
  url: 'http://example.com/api/login',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Cookie': cookies.join(';')
  },
  transformRequest: function(obj) {
    var str = [];
    for(var p in obj) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
    return str.join("&");
  },
  data: {
    'username': 'example',
    'password': '123456'
  }
}).then(function(response) {
  var cookies = response.headers()['set-cookie'];
});

以上代码表示发送POST请求到http://example.com/api/login，请求头包含cookie信息，获取到后端返回的cookie。

示例1：在AngularJS中发送跨域请求并携带cookie

$http({
  method: 'GET',
  url: 'http://example.com/resource',
  withCredentials: true
}).then(function(response) {
  var cookies = response.headers()['set-cookie'];
  console.log(cookies);
});

以上代码表示向http://example.com/resource发起GET请求，并允许跨域请求携带cookie，成功获取到后端返回的cookie并打印在控制台上。

示例2：在AngularJS中发送跨域请求，并携带cookie登录

$http({
  method: 'POST',
  url: 'http://example.com/api/login',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Cookie': cookies.join(';')
  },
  transformRequest: function(obj) {
    var str = [];
    for(var p in obj) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
    return str.join("&");
  },
  data: {
    'username': 'example',
    'password': '123456'
  }
}).then(function(response) {
  var cookies = response.headers()['set-cookie'];
  console.log(cookies);
});

以上代码表示发送POST请求到http://example.com/api/login，请求头包含cookie信息，成功获取到后端返回的cookie并打印在控制台上。