Angular 角度2未设置_Angular_Http_Cookies

Angular 角度2未设置

angular http cookies

Angular 角度2未设置,angular,http,cookies,Angular,Http,Cookies,我像这样使用http： private headers = new Headers({ 'Content-Type': 'application/json' }) login(loginUser: LoginUser): Promise<User> { return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.hea

我像这样使用http：

private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

private headers=新的头（{'Content-Type'：'application/json'}）
登录（登录用户：登录用户）：承诺{
返回此.http.post（'http://localhost:9009/api/users/login'，JSON.stringify（loginUser），{headers:this.headers}）
.toPromise（）
.then（res=>res.json（））
.接住（这个.把手错误）
}

这将自动将cookie设置为浏览器，如下所示：

private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

但浏览器中没有设置cookie

角度版本：2.4.10
浏览器：Chrome 56.0.2924.87（64位）| FireFox 52.0.2（64位）
语言：TypeScript 2.2.1
节点（用于AoT问题）：节点--version=3.10.10

响应标题：

我参考以下资源解决了我的问题：

首先，这是关于

跨源的问题。我必须在我的java服务器（在过滤器中）设置CORS头，如下所示：
private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

其次，我在发出请求时使用凭据设置属性，如下所示：
private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

get（url:string，parmas:any）：可观察{
返回this.http.get（url，{search:parmas，headers:this.headers，withCredentials:true}）
.map（（res:Response）=>res.json（））
.do（data=>console.log（'server data:'，data））//调试
.接住（这个.把手错误）；
}

最后，感谢@JJJ帮助我检测拼写错误。
我参考以下参考资料解决了我的问题：




首先，这是关于跨源的问题。我必须在我的java服务器（在过滤器中）设置CORS头，如下所示：
private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

其次，我在发出请求时使用凭据设置属性，如下所示：
private headers = new Headers({ 'Content-Type': 'application/json' })
login(loginUser: LoginUser): Promise<User> {
        return this.http.post('http://localhost:9009/api/users/login', JSON.stringify(loginUser), { headers: this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError)
    }

    httpServletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:4444");
    httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
    httpServletResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    httpServletResponse.addHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.addHeader("Access-Control-Allow-Headers", "Content-Type, Range");
    httpServletResponse.addHeader("Access-Control-Expose-Headers", "Accept-Ranges, Content-Encoding, Content-Length, Content-Range");

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

get（url:string，parmas:any）：可观察{
返回this.http.get（url，{search:parmas，headers:this.headers，withCredentials:true}）
.map（（res:Response）=>res.json（））
.do（data=>console.log（'server data:'，data））//调试
.接住（这个.把手错误）；
}

最后，感谢@jj帮助我检测拼写错误
客户端应具有withCredentials:true选项以将Cookie传递到后端api，CORS配置应具有“访问控制允许凭据”、“true”
如果在不同主机浏览器中创建的cookie不会从前端传递cookie（cookie创建主机和客户端URL主机地址应匹配）
CORS将用于配置允许的标头、主机和http方法，而不仅仅是cookie
浏览器在发出实际请求之前进行选项调用，因此如果使用api网关，则应配置预流（例如：apigee）
客户端应具有withCredentials:true选项以将Cookie传递到后端api，CORS配置应具有“访问控制允许凭据”、“true”
如果在不同主机浏览器中创建的cookie不会从前端传递cookie（cookie创建主机和客户端URL主机地址应匹配）
CORS将用于配置允许的标头、主机和http方法，而不仅仅是cookie
浏览器在发出实际请求之前进行选项调用，因此如果使用api网关，则应配置预流（例如：apigee）
没有烘焙cookie。谢谢，我通过设置withCredentials=true解决了此问题。谢谢，我通过设置withCredentials=true解决了此问题