0

I'm trying to make a call to Slack by building the request inside SPFx webpart. I get this error:

Access to fetch at 'https://slack.com/api/users.list/?token=xoxp-434981447611c02f5b714b535f666b27700543&channel=C494353JA' from origin 'https://localhost:4321' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

This is the webpart:

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
    BaseClientSideWebPart,
    IPropertyPaneConfiguration,
    PropertyPaneTextField
} from "@microsoft/sp-webpart-base";

import {
    HttpClient,
    IHttpClientOptions,
    HttpClientResponse
} from "@microsoft/sp-http";

import * as strings from "R3StatsWebPartStrings";
import R3Stats from "./components/R3Stats";
import { IR3StatsProps } from "./components/IR3StatsProps";

export interface IR3StatsWebPartProps {
    description: string;
}

export default class R3StatsWebPart extends BaseClientSideWebPart<
    IR3StatsWebPartProps
> {
    private makeRequest(): Promise<HttpClientResponse> {
        const token =
            "xoxp-437036086-447611c02f5b714b535f666b27700543";
        const channel = "C49JA";
        const url = `https://slack.com/api/users.list/?token=${token}&channel=${channel}`;
        const requestHeaders: Headers = new Headers();
        requestHeaders.append("Content-type", "application/json");
        const httpClientOptions: IHttpClientOptions = {
            headers: requestHeaders
        };
        return this.context.httpClient
            .post(url, HttpClient.configurations.v1, httpClientOptions)
            .then(response => {
                console.log(response);
                return response.json();
            });
    }

    public render(): void {
        const element: React.ReactElement<IR3StatsProps> = React.createElement(
            R3Stats,
            {
                description: this.properties.description
            }
        );

        ReactDom.render(element, this.domElement);

        this.makeRequest().then(params => {
            console.log("done");
        });
    }

    protected onDispose(): void {
        ReactDom.unmountComponentAtNode(this.domElement);
    }

    protected get dataVersion(): Version {
        return Version.parse("1.0");
    }

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
            pages: [
                {
                    header: {
                        description: strings.PropertyPaneDescription
                    },
                    groups: [
                        {
                            groupName: strings.BasicGroupName,
                            groupFields: [
                                PropertyPaneTextField("description", {
                                    label: strings.DescriptionFieldLabel
                                })
                            ]
                        }
                    ]
                }
            ]
        };
    }
}

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.