Ytukyg

I've created an Angular app with RESTful API authenticated by JWT, and I can access data in general profile page in Angular app, like url: api, but doesn't work for specific page, like url: api/5 which is authenticated by JWT.

However, I found it can access the data set actually, since the correct data was found in error content, so I confused about where went wrong:

my component:

getPosts() {

      this._blogPostService.list()

        .subscribe(

        // the first argument is a function which runs on success

        res => {

          this.posts = res;

      },

      // the second argument is a function which runs on error

      error => {

        console.error('Error saving');

        return throwError(error);

      },

      // the third argument is a function which runs on completion

      () => console.log('done loading!'),

    );

  }

list() here:

list() { 

    return this.http.get('api/1', {

      headers:{

        'Content-Type': 'application/json',

        Authorization: 'JWT ' + this._userService.token

      }

    });

  }

my html:

<button (click)="getPosts()">get quote</button>

  <br><br>

<h2 class="mt-3">Student Profile Pages</h2>

      <li *ngFor="let each of posts">



        <label class="col-md-2">Student:</label>

        <div class="col-md-2 mb-1">{{ each.user.username }}</div>



        <div class="col-md-2">{{ each.user.email }}</div>

        <div class="col-md-2">{{ each.location }}</div>

        <div class="col-md-2">{{ each.about }}</div>



      </li>

my dataset is that:

{

    "url": "http://127.0.0.1:8000/users/studentprofiles/5/",

    "id": 5,

    "user": {

        "url": "http://127.0.0.1:8000/users/users/7/",

        "id": 7,

        "username": "student",

        "password": "pbkdf2_sha256$120000$RGxW5X7OSwOw$hTU34GiyexDV4aT6hNQy0rHsWllnLdAm9vSohBvUqi4=",

        "first_name": "Hongzhi",

        "last_name": "Zhang",

        "email": "hongzhiz1@student.unimelb.edu.au",

        "user_type": 1,

        "is_superuser": false,

        "is_staff": false

    },

    "location": "richmond",

    "about": "this is a test",

    "phone": 3214324,

    "birthday": "1992-08-18",

    "owned_skills": [

        "http://127.0.0.1:8000/users/skills/3/"

    ],

    "chosen_interests": [

        "http://127.0.0.1:8000/users/interests/1/",

        "http://127.0.0.1:8000/users/interests/2/"

    ],

    "date_created": "2018-11-05T04:47:23.461476Z",

    "date_updated": "2018-11-15T05:07:17.456501Z",

}

I really want to know where went wrong.

I also referred to the answers in some similar questions, like: https://stackoverflow.com/a/49084550/6932409, but it doesn't work on my app.

The problem is about CORS, there are two approaches to solve this problem, one is add 'Access-Control-Allow-Origin': '*' to your http request, sometimes you need add more. Another answer is add CORS_ORIGIN_WHITELIST = 'localhost:4200', in your backend.