{"id":1267,"date":"2017-02-06T08:11:31","date_gmt":"2017-02-06T15:11:31","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1267"},"modified":"2017-02-06T08:11:31","modified_gmt":"2017-02-06T15:11:31","slug":"how-to-set-the-body-and-headers-for-the-sharepoint-framework-spfx-httpclient","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-set-the-body-and-headers-for-the-sharepoint-framework-spfx-httpclient\/","title":{"rendered":"HOW TO: Set the body and headers for the SharePoint Framework (SPFx) httpClient"},"content":{"rendered":"<p>In my article <a href=\"https:\/\/toddbaginski.com\/blog\/how-to-run-a-microsoft-flow-from-a-sharepoint-framework-spfx-web-part\/\" target=\"_blank\">How To: Run a Microsoft Flow from a SharePoint Framework (SPFx) web part<\/a> I set the headers and body when I called a Microsoft Flow with the SharePoint Framework (SPFx) <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient <\/a>class.<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"XzwMN20sTx\"><p><a href=\"https:\/\/toddbaginski.com\/blog\/how-to-run-a-microsoft-flow-from-a-sharepoint-framework-spfx-web-part\/\">How To: Run a Microsoft Flow from a SharePoint Framework (SPFx) web part<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;How To: Run a Microsoft Flow from a SharePoint Framework (SPFx) web part&#8221; &#8212; Todd Baginski&#039;s Blog\" src=\"https:\/\/toddbaginski.com\/blog\/how-to-run-a-microsoft-flow-from-a-sharepoint-framework-spfx-web-part\/embed\/#?secret=5bXH3pu1cL#?secret=XzwMN20sTx\" data-secret=\"XzwMN20sTx\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>In this post, I have simplified the code to succinctly demonstrate how to set the body and request headers when making a request with\u00a0the SharePoint Framework (SPFx) <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient <\/a>class. \u00a0Refer to the code snippet below.<\/p>\n<p>First, import <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient<\/a>,\u00a0 <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/ihttpclientoptions\" target=\"_blank\">IHttpClientOptions<\/a>, and <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclientresponse\" target=\"_blank\">HttpClientResponse <\/a> from the <a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/sp-http\" target=\"_blank\">@microsoft\/sp-http<\/a> npm package.<\/p>\n<p>To create the body for the POST request use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/JSON\/stringify\" target=\"_blank\">JSON.stringify<\/a> for a JSON payload or manually create a JSON payload. \u00a0If you are not working with a JSON payload then assemble the body accordingly.<\/p>\n<p>To set the headers for the request, first create the Headers class and add the appropriate headers to it. \u00a0In this example you can see several commonly used headers. \u00a0Notice I show how to set the Authorization header for both OAuth 2.0 and Basic authentication scenarios. \u00a0<strong>You would never use both of these Authorization headers at the same time; I just included them both for reference.<\/strong><\/p>\n<p>Next, add the body and the headers to the <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/ihttpclientoptions\" target=\"_blank\">IHttpClientOptions<\/a> interface.<\/p>\n<p>Finally, invoke the appropriate method on the SPFx\u00a0<a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient<\/a> to make the request. In this example, I am using the post method. \u00a0<strong><em>The approach is exactly the same when you use the get method.<\/em><\/strong><\/p>\n<p>When you call the post or get methods you pass in the following parameters:<\/p>\n<p><strong>url<\/strong> &#8211; the URL to fetch<br \/>\n<strong>configuration<\/strong> &#8211; determines the default behavior of HttpClient; normally this should be the latest version number from HttpClientConfigurations<br \/>\n<strong>options<\/strong> &#8211; additional options that affect the request<\/p>\n<p>The <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient<\/a> returns a promise that contains the result.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/TBag\/f9cc4ee5acdab75064abbfa78eb0b1c3.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/TBag\/f9cc4ee5acdab75064abbfa78eb0b1c3\">Gist<\/a>.<\/noscript><\/div>\n<p><strong>Note:<\/strong> I suggest you read <a href=\"http:\/\/www.sharepointnutsandbolts.com\/2016\/08\/async-rest-calls-promises-httpclient-jquery.html\">this article<\/a> by Chris O&#8217;Brien to learn more about the SPFx <a href=\"https:\/\/dev.office.com\/sharepoint\/reference\/spfx\/sp-http\/httpclient\" target=\"_blank\">httpClient<\/a>\u00a0class.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my article How To: Run a Microsoft Flow from a SharePoint Framework (SPFx) web part I set the headers and body when I called a<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[97,106],"tags":[10,6,7,115],"class_list":["post-1267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint","category-sharepoint-2016","tag-custom-development","tag-how-to-sharepoint","tag-sharepoint","tag-spfx"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1267"}],"version-history":[{"count":1,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"predecessor-version":[{"id":1268,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1267\/revisions\/1268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1269"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}