Pergunta

I am try to convert this old school example. It was drop 3, now I need to convert it to SPFx RC version;

private createItem(): void {
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {
        const body: string = JSON.stringify({
          '__metadata': {
            'type': listItemEntityTypeName
          },
          'Title': `Item ${new Date()}`
        });
        return this.props.httpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, {
          headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': ''
          },
          body: body
        })

only diff is shape of post. changed to;

private createItem(): void { 
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {

        return this.props.httpClient.post(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, 
        SPHttpClient.configurations.v1,
        "https://mydomain.sharepoint.com/sites/test14jan"
      })
  }

method simple adding an item to list in domain. myweb part running in server(https://mydomain.sharepoint.com/_layouts/15/workbench.aspx) each time I refresh the page this error seems in console(before call any method) enter image description here

"403 forbidden" can you help me to solve this please? I am pretty sure this cause my problem because I am able to get items from list via this get method;

this.props.httpClient.get(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$select=Title,Id`, 
        SPHttpClient.configurations.v1)

so something wrong with post. using oldschool header object not works with spfx RC.0 as you know

EDITED: Here is exception; enter image description here

Foi útil?

Solução

I think there is nothing to do with javascript error you mentioned (suiteserviceproxy.aspx), because this error doesn't related to SPFx. For example I'm also see this error on my dev tenant on many different pages (not only workbench.aspx). I tend to think this is some misconfiguration with other Office 365 services, but for dev tenant that's OK.

For you question, I think you need to fix two things:

  1. Use SPHttpClientConfigurations instead of SPHttpClient (like they mentioned under release notes for RC0)
  2. You didn't provide request body for post, which is required if you want to update an item.

So you updated code will be:

import required modules:

import {SPHttpClient, SPHttpClientConfigurations} from '@microsoft/sp-http'; 

 private createItem(): void {
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {
        const body: string = JSON.stringify({
          '__metadata': {
            'type': listItemEntityTypeName
          },
          'Title': `Item ${new Date()}`
        });
        return this.props.httpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, SPHttpClientConfigurations.v1, {
          headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': ''
          },
          body: body
        }) 

UPD
I guess you are not using latest version of npm packages and typescript definitions. Consider screen from my env (post accepts three arguments):

enter image description here

When migrating to RC0 I found it MUCH easier to run everything from scratch and then add missing files. Otherwise you might have total mess (like I had) with different versions of modules and ts errors.

First of all you need to update yo generator for SPFx:
npm install -g @microsoft/generator-sharepoint

Then in a clean folder run yo @microsoft/sharepoint. Select your template (React or No JS framework).
Then start adding missing files and check if it works now.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a sharepoint.stackexchange
scroll top