I am trying make a easy demo with azure-search-openai-demo, For now, all I want is to make a new page with a button. When I press the button, it will run the indexer that I have set on the Azure portal.
The problem is that, I am keep getting the error like below which does not allowed me to do that on frontend even I am using the admin key.
Would be deeply appreciated if someone can help me with this.
Access to fetch at ‘https://searchServiceName.search.windows.net/indexers/indexerName/run?api-version=2020-06-30’ from origin ‘http://127.0.0.1:50505’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
<code>import React from "react";
import { DefaultButton } from "@fluentui/react";
import styles from "./Helloworld.module.css";
const HelloWorld: React.FC = () => {
// run indexer button
// =========================================================
const runIndexer = async () => {
const indexerName = "xxx"; // indexer name
const searchServiceName = "xxx"; // ai search service name
const apiKey = "xxx"; // api key
const url = `https://${searchServiceName}.search.windows.net/indexers/${indexerName}/run?api-version=2020-06-30`;
await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"api-key": apiKey
}
});
console.log(`Running Indexer ${indexerName} .....`);
};
return (
<div className={styles.container}>
<h1>Hello World</h1>
<DefaultButton onClick={runIndexer} text="Run Indexer" className={styles.runIndexerButton} />
</div>
);
};
export default HelloWorld;</code>
<code>import React from "react";
import { DefaultButton } from "@fluentui/react";
import styles from "./Helloworld.module.css";
const HelloWorld: React.FC = () => {
// run indexer button
// =========================================================
const runIndexer = async () => {
const indexerName = "xxx"; // indexer name
const searchServiceName = "xxx"; // ai search service name
const apiKey = "xxx"; // api key
const url = `https://${searchServiceName}.search.windows.net/indexers/${indexerName}/run?api-version=2020-06-30`;
await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"api-key": apiKey
}
});
console.log(`Running Indexer ${indexerName} .....`);
};
return (
<div className={styles.container}>
<h1>Hello World</h1>
<DefaultButton onClick={runIndexer} text="Run Indexer" className={styles.runIndexerButton} />
</div>
);
};
export default HelloWorld;</code>
import React from "react";
import { DefaultButton } from "@fluentui/react";
import styles from "./Helloworld.module.css";
const HelloWorld: React.FC = () => {
// run indexer button
// =========================================================
const runIndexer = async () => {
const indexerName = "xxx"; // indexer name
const searchServiceName = "xxx"; // ai search service name
const apiKey = "xxx"; // api key
const url = `https://${searchServiceName}.search.windows.net/indexers/${indexerName}/run?api-version=2020-06-30`;
await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"api-key": apiKey
}
});
console.log(`Running Indexer ${indexerName} .....`);
};
return (
<div className={styles.container}>
<h1>Hello World</h1>
<DefaultButton onClick={runIndexer} text="Run Indexer" className={styles.runIndexerButton} />
</div>
);
};
export default HelloWorld;