как называть URL его api rest symfony с ионным - PullRequest
Новая
       16

как называть URL его api rest symfony с ионным

0 голосов
/ 27 сентября 2019

Я разработал свой api rest в symfony и провожу некоторые тесты с почтальоном, все в порядке, сейчас я работаю над лицевой частью с ionic для мобильного приложения, а для аутентификации хочу узнать, какиспользовать мой URL-адрес логина моего API отдыха.когда я проверяю форму входа в систему, в консоли возникает ошибка, которая показывает мне

net :: ERR_CONNECTION_REFUSED

и другую ошибку

XMLHttpRequest не может загрузить http://127.0.0.1:8000/auth-tokens. Нет заголовка «Access-Control-Allow-Origin» на запрошенном ресурсе.

Контроллер аутентификации 

     /**
 * @Rest\View(statusCode=Response::HTTP_CREATED, serializerGroups={"auth-token"})
 * @Rest\Post("/auth-tokens")
 */
public function postAuthTokensAction(Request $request)
{
    $credentials = new Credentials();
    $form = $this->createForm(CredentialsType::class, $credentials);

    $form->submit($request->request->all());

    if (!$form->isValid()) {
        return $form;
    }

     $em = $this->getDoctrine()->getManager();

    $user = $em->getRepository("DoctixUserBundle:User")
        ->findOneByUsername($credentials->getLogin());

    if (!$user) { // L'utilisateur n'existe pas
        return $this->invalidCredentials();
    }

    $encoder = $this->get('security.password_encoder');
    $isPasswordValid = $encoder->isPasswordValid($user, $credentials->getPassword());

    if (!$isPasswordValid) { // Le mot de passe n'est pas correct
        return $this->invalidCredentials();
    }

    $authToken = new AuthToken();
    $authToken->setValue(base64_encode(random_bytes(50)));
    $authToken->setCreatedAt(new \DateTime('now'));
    $authToken->setUser($user);

    $em->persist($authToken);
    $em->flush();

    return $authToken;
}

private function invalidCredentials()
{
    return \FOS\RestBundle\View\View::create(['message' => 'Invalid credentials'], Response::HTTP_BAD_REQUEST);
}

Ионная HTML-страница 

<ion-app>
  <ion-header translucent>
    <ion-toolbar>
      <ion-title>Se Connecter</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content fullscreen>
    <form>
      <ion-list lines="full" class="ion-no-margin ion-no-padding">
        <ion-item>
          <ion-label position="stacked">Nom d'utilisateur  <ion-text color="danger">*</ion-text></ion-label>
          <ion-input required type="text" name="username" [(ngModel)]="username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Mot de passe <ion-text color="danger">*</ion-text></ion-label>
          <ion-input required type="password" name="password" [(ngModel)]="password" ></ion-input>
        </ion-item>

      </ion-list>

      <div class="ion-padding">
        <ion-button size="small" type="submit" (click)="authenticate()" class="ion-no-margin">Se Connecter</ion-button>
        <ion-button size="small" routerLink="/register" routerDirection="forward" class="ion-no-margin">S'inscrire</ion-button>
      </div>
    </form>
  </ion-content>
</ion-app>

Контроллер Ionic Script 

import { Component } from '@angular/core';
import {NavController} from '@ionic/angular';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
// import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
@Injectable()
export class HomePage {

  username: any;
  password: any;
  response: any;
  constructor(public navCtrl: NavController, private http: Http) {
  }

  login() {
            // this.authenticate();
  }

  authenticate() {
    const url     = 'http://127.0.0.1:8000/auth-tokens';
    const body     = new URLSearchParams();
    console.log('Username: ' + this.username);
    console.log('Password: ' + this.password);
    body.append('login', this.username);
    body.append('password', this.password);
    const headers = new Headers(
        {'Content-Type': 'application/json'}
        );
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Headers', '*');
    headers.append('Access-Control-Allow-Credentials', 'true');
    const options = new RequestOptions({headers});

    const localData = this.http
        .post(url, body.toString(), options).pipe(map(
            (data) => data.json())
        );
    localData.subscribe(res => {
      this.response = res;
      console.log(this.response);
    });
  }

Спасибо

1 Ответ

0 голосов
/ 27 сентября 2019

Вы, похоже, столкнулись с проблемой CORS.

Вы пытались правильно настроить Nelmio CORS?

Файл конфигурации может выглядеть примерно так: 

nelmio_cors:
defaults:
    origin_regex: true
    allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
    allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
    allow_headers: ['Content-Type', 'Authorization']
    max_age: 3600
paths:
    '^/': ~

ГдеВы можете изменить необходимые настройки курса.

В allow_origin вы должны указать (с этим конфигом в файле .env) URL, разрешенные для использования CORS, такие как 

CORS_ALLOW_ORIGIN=^https?://(localhost|mydomain.tld)(:[0-9]+)?$
...