PhoneGap中文网

标题: Angular4 Angular5 cookie跨域以及相关配置http credentials 配置 [打印本页]
作者: admin    时间: 2018-9-28 16:34
标题: Angular4 Angular5 cookie跨域以及相关配置http credentials 配置
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: '*', 会有如下报错信息


  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插件

  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';

  7. @Injectable()
  8. export class LoginService {
  9.     private _loginUrl = 'MyUrl/Login';
  10.     loginCred: Icredentials = {
  11.         "filed1": "dummy1",
  12.         "filed2": "dummy2",
  13.         "filed3": "dummy3"
  14.     };

  16.     private headers = new Headers({ 'Content-Type': 'application/json' });

  18.     constructor(private _http: Http){

  20.     }

  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);

  28.     }
复制代码




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









欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2