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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.