Angular 4 Typescript http post request not working

-1

我正在嘗試通過向服務器上的PHP文件發出http post請求來爲我的課程項目製作工作聯繫表單。我知道php文件的工作原理，因爲當我直接路由到它時，它會ping我的電子郵件，當我在瀏覽器中調試時，我可以看到它正在嘗試構建http請求。我遇到的問題是我不明白我在做什麼。我希望有人能告訴我我的代碼出了什麼問題，或者指向正確的方向。任何幫助將不勝感激...這裏是我到目前爲止有：Angular 4 Typescript http post request not working

headers = { 
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
} 

data = { 
    name:'name', 
    phone:'555-5555', 
    email:'[email protected]', 
    message:'hello' 
} 

constructor(private http: Http) { } 

postData() { 
    console.log(this.data); 
    this.http.post('http://mywebsite.net/contact_me.php', 
this.data, this.headers); 
}

來源

2017-06-04 Kanoa Azinger

訂閱它，請在發佈成功，失敗和功能齊全的 – Dhyey

我的console.log對不起，我真的不知道如何記錄這些功能。當我記錄結果時，我得到以下錯誤： XMLHttpRequest無法加載http://mywebsite.net/contact_me.php。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問Origin'http：// localhost：4200'。 –

您的服務器腳本是否支持CORS請求？換句話說，是否啓用了CORS？ –

將此添加到我的PHP文件：

header("Access-Control-Allow-Origin: http://localhost:4200");

和更新我的身體參數：

JSON.stringify(this.data)

我仍然遇到了我的頭文件param回來時出現'未定義'的問題，但這足以至少用空信息來ping我的電子郵件。謝謝您的幫助！

來源

2017-06-04 22:38:46

我也面臨這樣的問題

step1 set Headers in php file

header("Access-Control-Allow-Origin: *"); 

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

採樣功能，你可以得到響應

public function createAction(Request $request) { 

    $data=file_get_contents('php://input'); 

    var_dump($data);//here you print you 'POST' or 'GET' Response.

step2 service.ts formService.ts

private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}); 

private insertdataUrl = 'api-url'; 

//create function that is called by component.html file 
    create(user: ApiDashboard) { 
    return this.http.post(this.insertdataUrl,user).map(response => response.json()); 

    } 
    //here in my code ApiDashboard is model

step3 define you service function in component.ts file

export class ApiDashboardformComponent implements OnInit { 
model: any = {}; 
loading = false; 
    constructor(private router: Router, 
    private formService: FormService 
    ) { } 

ngOnInit() { 
} 
Create() { 
    this.loading = true; 
     this.formService.create(this.model) 
     .subscribe(
      data => { 
       this.formService.success('Registration successful', true); 
       this.router.navigate(['/material-dashboard']); 
      }, 
      error => { 
       this.formService.error(error); 
       this.loading = false; 
      }); 
     } 
    }

step4 finally call create() function component.html file

<div class="col-md-6 col-md-offset-3"> 
    <h2>Register</h2> 
    <form name="form" (ngSubmit)="f.form.valid && Create()" #f="ngForm" novalidate>

來源

2017-08-08 09:18:25 afeef

Angular 4 Typescript http post request not working

回答

相關問題