AngularJS withCredentials 未发送

AngularJS

# 解决AngularJS withCredentials未发送的问题

在使用AngularJS进行跨域请求时，有时候会遇到withCredentials选项未能正确发送的情况。这个问题可能会导致一系列跨域请求相关的麻烦，但幸运的是，我们可以通过一些调整和设置来解决这个问题。

## 跨域请求和withCredentials

首先，让我们简要了解一下AngularJS中的withCredentials选项。当我们在AngularJS中使用XMLHttpRequest进行跨域请求时，浏览器默认是不发送跨域请求的Cookie的。而withCredentials选项的作用就是告诉浏览器，该请求是包含身份凭证信息的，允许发送Cookie。

## 问题的根本原因

在某些情况下，即使我们明确设置了withCredentials为true，AngularJS仍然可能不发送这个选项。这通常发生在以下情况下：

1. 请求的Content-Type不符合规范： AngularJS要求在使用withCredentials时，请求的Content-Type必须是application/x-www-form-urlencoded、multipart/form-data或text/plAIn。

2. 自定义头部的问题： 如果你在请求中使用了自定义头部，例如Authorization，确保服务器允许这些头部，否则浏览器会拒绝发送带有自定义头部的跨域请求。

## 解决方法

要解决这个问题，我们可以采取以下步骤：

1. 设置请求的Content-Type

确保请求的Content-Type符合AngularJS的要求。如果是application/JSon，可能会导致withCredentials失效。将Content-Type设置为application/x-www-form-urlencoded可以尝试解决这个问题。

Javascript
$http({
    method: 'POST',
    url: 'https://example.com/api/data',
    data: $httpParamSerializerJQLike(data),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    withCredentials: true
}).then(function(response) {
    // 处理响应
}, function(error) {
    // 处理错误
});

2. 检查自定义头部

如果你在请求中使用了自定义头部，确保服务器允许这些头部。在服务器端配置中添加适当的头部响应，以允许浏览器发送跨域请求。

Javascript
// 服务器端示例（Node.JS）
app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'https://your-angular-app.com');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});

通过以上步骤，你应该能够解决AngularJS withCredentials未发送的问题。确保服务器和前端的配置都正确，以便实现跨域请求的正常运行。