"status": 403 when doing requests from localhost

I am working on a headless WordPress project in Next.js. I would like to integrate Angolia Search because it is great :smiley:
I have created an index of my WordPress page from the WordPress plugin “Algolia Search” and when I log into the user-interface on https://www.algolia.com/apps everything looks like intended under “Indeces”.
However, I have cannot seem to get the search functionality to work in development. I am building React Components using the InstantSearch, connectStateResults, SearchBox components imported from the react-instantsearch-dom npm package.

I keep getting this error in the browser log:

Failed to load resource: the server responded with a status of 403 (Forbidden)

If I check the user-interface in https://www.algolia.com/apps > monitoring > Search API Logs All requests are registered, but also marked with 403

The response body:

{
  "message": "Invalid Application-ID or API key",
  "status": 403
}

But I have double-checked the app-id, apiKey and indexName they are all correct.

So what could the culprit be?
Security headers in Next.js?
Localhost running http and not https?
Not sure where to go from here when all requests are blocked like this?

This is the full error-message in the browser (I have anonymized id´s):

POST https://9gexosiyu5-dsn.algolia.net/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.10.3)%3B%20Browser%20(lite)%3B%20JS%20Helper%20(3.5.5)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(6.12.1)&x-algolia-api-key=6be0576ff61c053xxxxxxxx-algolia-application-id=9GEXXXXXX 403 (Forbidden)
	(anonymous)	@	algoliasearch-lite.umd.js:2
send	@	algoliasearch-lite.umd.js:2
t	@	algoliasearch-lite.umd.js:2
(anonymous)	@	algoliasearch-lite.umd.js:2
Promise.then (async)		
j	@	algoliasearch-lite.umd.js:2
n	@	algoliasearch-lite.umd.js:2
(anonymous)	@	algoliasearch-lite.umd.js:2
get	@	algoliasearch-lite.umd.js:2
(anonymous)	@	algoliasearch-lite.umd.js:2
get	@	algoliasearch-lite.umd.js:2
read	@	algoliasearch-lite.umd.js:2
(anonymous)	@	algoliasearch-lite.umd.js:2
push../node_modules/algoliasearch-helper/src/algoliasearch.helper.js.AlgoliaSearchHelper._search	@	algoliasearch.helper.js:1270
push../node_modules/algoliasearch-helper/src/algoliasearch.helper.js.AlgoliaSearchHelper.search	@	algoliasearch.helper.js:149
search	@	createInstantSearchManager.js:223
onExternalStateUpdate	@	createInstantSearchManager.js:473
onWidgetsInternalStateUpdate	@	InstantSearch.js:161
(anonymous)	@	createConnector.js:62
(anonymous)	@	SearchBox.js:145
callCallback	@	react-dom.development.js:3945
invokeGuardedCallbackDev	@	react-dom.development.js:3994
invokeGuardedCallback	@	react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError	@	react-dom.development.js:4070
executeDispatch	@	react-dom.development.js:8243
processDispatchQueueItemsInOrder	@	react-dom.development.js:8275
processDispatchQueue	@	react-dom.development.js:8288
dispatchEventsForPlugins	@	react-dom.development.js:8299
(anonymous)	@	react-dom.development.js:8508
batchedEventUpdates$1	@	react-dom.development.js:22396
batchedEventUpdates	@	react-dom.development.js:3745

I have tried removing all security headers in next.js. That made no difference.

Hi @larsejaas

The only time I receive "Invalid Application-ID or API key" is when they App ID or API Key is wrong or if the API Key does not have the correct ACLs for the index.

Have you used the copy button or typed these details manually? Are you using the Search-Only API Key?

Thanks @the This gives me a bit to work with! I will dig a bit into this :blush:

Hi again @the
The joys of web-development :laughing:
Of course, I made a typo! I somehow managed to delete the last digit in the Search-Only API Key.
Not sure how I managed to miss this, but things seem to be working now!

Thanks again for the fast reply!

I’m not a web developer, so I’ll take your word for it regarding “the joys”.