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

WBOY
Release: 2023-03-01 15:52:01
Original
1200 people have browsed it

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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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>
Copy after login
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template