Блог

Привет, у меня есть 2 домена: 1 для основного веб-сайта www.something.com и еще один для apis.something.com

• основной веб-сайт www.something.com является интерфейсом(angular) в html есть форма с входными данными
• поддомен — это apis.something.com серверная часть laravel, которая использовала для соединения всех API с интерфейсом запрос на отправку контактной информации в hubspot api

проблема в том, что когда я отправляю api post request (hubspot API) через клиентскую часть angular напрямую, у меня возникает ошибка CORS

Примечание:

• hubspot заблокирован любой post-запрос на стороне клиента с помощью CORS
• и если я отправлю запрос через серверную часть (laravel) и отправлю заголовок allow origin , он примет и отправит html обычный html с лезвием в laravel, который был создан вручную не через angular

желаемый

я хочу send the request сформировать который в angular на главном веб-сайте www.something.com и отправить его во второй поддомен API laravel, apis.something.com затем отправить запрос api post к hubspot api через laravel, а не через angular.

Сценарий:

форма angular (интерфейс) www.something.com -> laravel (серверная часть) apis.something.com -> hubspot api

Угловой код :

sending.component.html

 <form
    #pInputs="ngForm"
    (ngSubmit)="form.valid amp;amp; sendRequestData2(pInputs.value)"
    (ngSubmit)="form.valid amp;amp; sendRequestData()"
    #form="ngForm"
    autocomplete="nope"
  >
<input
              type="text"
              name="name"
              [(ngModel)]="user.name"
              #name="ngModel"
              class="form-control"
              id="booking-name"
              placeholder="Enter your full name here"
              [required]="true"
            />
<button
          type="submit"
          class="btn btn-blue  text-white  brs25 pl50 pr50 brs22"
          i18n="@@send_request_now"
          [disabled]="!form.valid"
        >
          Send Request Now
        </button>
</form>
  

отправка.component.ts

 export class SendSurgeryRequestFormComponent implements OnInit {
private readonly DEAL_URL = 'http://www.something.com';
  user = {
    name: ""
  };

  constructor(private bookingService: BookingService,private router: Router, private http:HttpClient) {}
  
  ngOnInit() {}

 sendRequestData2(data){

    const url = this.DEAL_URL;

    var payloads = JSON.stringify(data);
    this.http.post(url,
      payloads).subscribe((result)=>{
      console.log("the result", result);
      });
      console.warn(payloads);
    }

  goHome() {
    this.router.navigate(['/']);
  }
}
  

Код Laravel :

Маршрут Laravel

 header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Key');
    
Route::post('https://api.hubapi.com/contacts/v1/contact?hapikey=??????????????????', 'HubspotApiController@create');
  

Контроллер Laravel

 <?php

namespace AppHttpControllers;


use GuzzleHttpExceptionGuzzleException;

use GuzzleHttpClient;
use IlluminateHttpRequest;

class HubspotApiController extends Controller
{
    //

    public function create(Request $r)
    { 
        $arr = [
            'properties' => [
                  [
                    'property' => 'name',
                    'value' => $r['name']
                  ]           
                            ]
               ];


        $post_json = json_encode($arr);
        $client = new Client([
        'headers' => ['Content-Type' => 'application/json']
         ]);            
        
        $res = $client->request('POST',[
        'body' => $post_json]);
        return "Contact Created!";
        
         
    
        return back();
    }
}