I am trying to use companies house rest api with next14 app but i am facing with some cors policy issues even though i set everything about cors for a next app. My codes and the error that i get below, hope anyone can help
app/api/middleware.js
import { NextResponse } from “next/server”;
export function middleware() {
const res = NextResponse.next();
res.headers.append(“Access-Control-Allow-Credentials”, “true”);
res.headers.append(“Access-Control-Allow-Origin”, “http://localhost:3000/”);
res.headers.append(
"Access-Control-Allow-Methods",
"GET,DELETE,PATCH,POST,PUT"
);
res.headers.append(
"Access-Control-Allow-Headers",
"X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
);
return res;
}
/utils/api
import axios from “axios”;
const apiKey = “e2c877d3-46c9-43a2-84f4-0380b5cba5b3”;
const companiesHouseApi = axios.create({
baseURL:
"https://api.company-information.service.gov.uk/advanced-search/companies",
headers: {
Authorization: `Basic ${btoa(apiKey + ":")}`,
},
});
export const checkCompanyName = async (companyName) => {
try {
const response = await companiesHouseApi.get(
`/search/companies?q=${companyName}`
);
return response.data;
} catch (error) {
throw error;
}
};
app/namecheck/page.jsx
“use client”;
import { useState } from “react”;
import { checkCompanyName } from “…/…/utils/api”;
const CompanyNameChecker = () => {
const [companyName, setCompanyName] = useState("");
const [result, setResult] = useState(null);
const handleCheck = async () => {
try {
const data = await checkCompanyName(companyName);
setResult(data);
} catch (error) {
console.error("Error checking company name:", error);
}
};
return (
<div>
<input
type="text"
value={companyName}
onChange={(e) => setCompanyName(e.target.value)}
/>
<button onClick={handleCheck}>Check Company Name</button>
{result && (
<div>
<h2>Results:</h2>
<pre>{JSON.stringify(result, null, 2)}</pre>
</div>
)}
</div>
);
};
export default CompanyNameChecker;
i am getting “Access to XMLHttpRequest at ‘1https://api.company-information.service.gov.uk/advanced-search/companies/search/companies?q=london’ from origin ‘1http://localhost:3000’ 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.” this error