Hello, I'm Kim Woo Chang.
If I attach Excel files in the current canvas app, I want to create a PCF that CRUDs data into the Sharepoint List.
However, there is an error when calling Rest Api inside the PCF, so it cannot be used.
Neither my Azure functions nor graph api were available.
Can I get an idea of what to do?
Cross-Origin Resource Sharing error
Below is an example of the source code you tried.
private async getAccessToken(): Promise<string> {
// 여기에 로직을 구현하여 액세스 토큰을 반환합니다.
const tokenEndpoint = "https://login.microsoftonline.com/tenentid/oauth2/v2.0/token"; // 이후 수정 필요
const clientId = "";
const clientSecret = "";
const grantType = "client_credentials";
const scope = "https://graph.microsoft.com/.default";
const params = new URLSearchParams();
params.append("grant_type", grantType);
params.append("client_id", clientId);
params.append("client_secret", clientSecret);
params.append("scope", scope);
let accessToken = "";
console.log("fetch시작");
await fetch(tokenEndpoint, {
method: "POST",
mode: 'no-cors',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: params
})
.then(response => response.json())
.then(data => {
accessToken = data.access_token;
})
.catch(error => console.error("Error:", error));
console.log("accessToken 가져옴?");
console.log(accessToken);
return accessToken;
}
Hi @nanenchanga ,
Did you get the error inside the maker portal (make.powerapps.com)? Or inside the app itself?
Maybe there are other approaches, where you don't have to deal with authentication in the PCF:
One idea for PCFs inside CanvasApps could be to use the connectors to work with Excel and SharePoint.
From the PCF perspective you deal with datasets or properties.
- It could work with two datasets (including dataset saving): one for Excel, one for Sharepoint...
- Or maybe you could use a dataset property for the source of your data, and an output object to provide the changed data back to the app, which can save it after that.
Another thing you might want to check out: the PCF manifest has a "external-service-usage" declaration, where you can declare a domain used by the PCF. I haven't used it until now, but maybe it helps: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/external-service-usage?WT.mc_id=BA-MVP-5004107
I do not have an answer if there is another way, I have never built anything similar before but that would be the way I would do it if I have a need to build such functionality.
Is it possible to use only the SPA method?
In this case, I would recommend checking the following controls as examples:
https://taerimhan.com/calling-microsoft-graph-using-azure-msal-react-from-pcf-control/
https://taerimhan.com/consuming-microsoft-graph-api-from-pcf-control/
Canvas
Hello,
Where do you plan to use this PCF component? MDA or Canvas?
WarrenBelz
85
Most Valuable Professional
Michael E. Gernaey
65
Super User 2025 Season 1
mmbr1606
55
Super User 2025 Season 1