Home  >  Article  >  Backend Development  >  ionic2/angular2 cannot access the api created by laravel5.3

ionic2/angular2 cannot access the api created by laravel5.3

WBOY
WBOYOriginal
2016-12-01 00:25:251201browse

laravel 5.3 api has been configured

<code>    //category.service.ts
    private headers = new Headers({'Content-Type': 'application/json','Accept':'application/json','Authorization':'Bearer '+window.localStorage.getItem('token')});

    private heroesUrl = 'http://xingao.5188cms.com/api/user';  // URL to web api

    private handleError(error: any): Promise<any> {
      console.error('An error occurred', error); // for demo purposes only
      return Promise.reject(error.message || error);
    }
</code>

Access like this, promptXMLHttpRequest cannot load http://xingao.5188cms.com/api/user. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access., it seems to be a cross-domain problem, but I can successfully obtain the data using postman

ionic2/angular2 cannot access the api created by laravel5.3

Step 2

I changed the link to onehttp://xingao.5188cms.com/test.php

<code>//test.php
<?php 
header("Access-Control-Allow-Origin: *");
$arr=['1','2'];

echo json_encode($arr);
?></code>

Still not workingXMLHttpRequest cannot load http://xingao.5188cms.com/test.php. Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Step 3

I changed the link to /test.json, but it works

Then what is the reason? . . .

Reply content:

laravel 5.3 api has been configured

<code>    //category.service.ts
    private headers = new Headers({'Content-Type': 'application/json','Accept':'application/json','Authorization':'Bearer '+window.localStorage.getItem('token')});

    private heroesUrl = 'http://xingao.5188cms.com/api/user';  // URL to web api

    private handleError(error: any): Promise<any> {
      console.error('An error occurred', error); // for demo purposes only
      return Promise.reject(error.message || error);
    }
</code>

Access like this, promptXMLHttpRequest cannot load http://xingao.5188cms.com/api/user. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access., it seems to be a cross-domain problem, but I can successfully obtain the data using postman

ionic2/angular2 cannot access the api created by laravel5.3

Step 2

I changed the link to onehttp://xingao.5188cms.com/test.php

<code>//test.php
<?php 
header("Access-Control-Allow-Origin: *");
$arr=['1','2'];

echo json_encode($arr);
?></code>

Still not workingXMLHttpRequest cannot load http://xingao.5188cms.com/test.php. Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Step 3

I changed the link to /test.json, but it works

Then what is the reason? . . .

Access-Control-Allow-Origin
Cross-domain problem
This is a browser limitation

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn