2017-05-04 42 views
2

我使用節點」必須是「真」,表達對後端和angular4在這是給我的客戶端以下錯誤:「訪問控制允許的憑據」在響應頭爲「

XMLHttpRequest cannot load http://localhost:4876/login/check . Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin ' http://localhost:4200 ' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

API,用於登錄/檢查的形式實現,如下:

router.get('/login/check', (req: any, res: any) => { 
     let api = new ApiConnection(req, res); 
     let accessCard: IAccessCard = api.getContent(Auth.ACCESS_CARD_KEY); 
     if(!Auth.isValid(accessCard)) 
      return api.response.error(); 

     ChatBox.auth.isExpired(accessCard, function (err:any, isExpired: boolean) { 
      if (err) return api.response.error(); 
      if(!isExpired) { 
       api.cookie("AccessCard", accessCard); 
       api.response.success(accessCard); 
      } 
      else { 
       api.response.error(); 
      } 
     }) 
    }); 

哪裏路由器定義是const router = require('express').Router()

設置中間件的標頭和CORS如下:

export class Application { 
    private app:any = express(); 
    constructor() { 
     this.setCors(); 
     this.setHeaders(); 
    } 

    public getApp():any { 
     return this.app; 
    } 

    private setCors(){ 
     let whitelist = ['http://localhost:4200','http://localhost:80']; 
     let corsOptions = { 
      origin: (origin:any, callback:any)=>{ 
       if (whitelist.indexOf(origin) !== -1) { 
        callback(null, true) 
       } else { 
        callback(new Error('Not allowed by CORS')) 
       } 
      } 
     } 
     this.app.use(cors(corsOptions)); 
    } 



    private setHeaders() { 
     this.app.use(function (req:any, res:any, next: any) { 

      // Website you wish to allow to connect 
      //res.setHeader('Access-Control-Allow-Origin', Config.WEB_APP_HOST); 
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200'); 

      // Request methods you wish to allow 
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 

      // Request headers you wish to allow 
      res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type'); 

      // Set to true if you need the website to include cookies in the requests sent 
      // to the API (e.g. in case you use sessions) 
      res.setHeader('Access-Control-Allow-Credentials', true); 

      // Pass to next layer of middleware 
      next(); 
     }); 
    } 
} 

在客戶端,我用API如下:

public startSession(callback: (status: boolean, result: any) => void) { 
    let self: ChatBox = this; 
    /** 
    * @res.result: IAccessCard 
    */ 
    this.mApiConnection.get(Api.root+'/login/check', (res: any) => { 
     if (res.status == ResponseStatus.SUCCESS) { 
     self.mStorage.storeAccessCard(res.result); 
     self.loadAccount(res.result); 
     } 
     callback(res.status, res.result); 
    }) 
    } 
+0

顯示客戶端碼 –

回答

3

雖然設定CORS在corsOptions我增值憑證真實,它的工作如下:

private setCors(){ 
     let whitelist = ['http://localhost:4200','http://localhost:80']; 
     let corsOptions = { 
      origin: (origin:any, callback:any)=>{ 
       if (whitelist.indexOf(origin) !== -1) { 
        callback(null, true) 
       } else { 
        callback(new Error('Not allowed by CORS')) 
       } 
      },credentials: true 
     } 
     this.app.use(cors(corsOptions)); 
    } 
相關問題