Angular4 Angular5 cookie跨域以及相关配置http credentials 配置

admin

Angular4 Angular5 cookie跨域以及相关配置



1、Angular4 Angular5 默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决。 这个时候需要注意需要后端配合设置：

header信息 Access-Control-Allow-Credentials:true

Access-Control-Allow-Origin不可以为 '*'，因为 '*' 会和 Access-Control-Allow-Credentials:true 冲突，需配置指定的地址

如果后端设置 Access-Control-Allow-Origin: '*', 会有如下报错信息

1. 
   
2. Failed to load http://localhost:8090/category/lists: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
   

复制代码

后端配置缺一不可，否则会出错，贴上我的后端示例：

1. const express = require('express')
   
2. const app = express()
   
3. const cors = require('cors') // 此处我的项目中使用express框架，跨域使用了cors npm插件
   
4. 
   
5. app.use(cors{
   
6.             credentials: true,
   
7.             origin: 'http://localhost:8081', // web前端服务器地址
   
8.             // origin: '*' // 这样会出错
   
9.         })

复制代码

成功之后，可在请求中看到


Angular4 Angular5 cookie跨域以及相关配置http with  credentials 配置

1. import { Injectable } from 'angular2/core';
   
2. import { IjobCard } from '../jobCard/jobCard';
   
3. import { Http, Response } from 'angular2/http';
   
4. import { Observable } from 'rxjs/Observable';
   
5. import { Icredentials } from './credentials';
   
6. 
   
7. @Injectable()
   
8. export class LoginService {
   
9.     private _loginUrl = 'MyUrl/Login';
   
10.     loginCred: Icredentials = {
    
11.         "filed1": "dummy1",
    
12.         "filed2": "dummy2",
    
13.         "filed3": "dummy3"
    
14.     };
    
15. 
    
16.     private headers = new Headers({ 'Content-Type': 'application/json' });
    
17. 
    
18.     constructor(private _http: Http){
    
19. 
    
20.     }
    
21. 
    
22.     login(): Observable<any>[] {
    
23.         return this._http.post(this._loginUrl, JSON.stringify(this.loginCred),
    
24.             { headers: this.headers, withCredentials: true })
    
25.             .map((response: Response) => <any[]>response.json())
    
26.             .catch(this.handleError);
    
27. 
    
28.     }

复制代码

来源：https://stackoverflow.com/questions/39437956/angular2-http-with-credentials-cant-add-cookies