Hello everyone!
I’ve been trying to follow the “Create and deploy at once” steps to upload .zip file as described in here Netlify Docs:
It works perfectly when using with cURL, I’m able to deploy the static files inside .zip, receive response all the related information about the deploy (site id, etc.) and it resulting website works fine.
The problem comes when trying to do the same within Next.js app. When I submit POST request to the same endpoint, the files are still uploaded to Netlify and are running fine but the response to the POST request is as of below:
Access to XMLHttpRequest at ‘https://api.netlify.com/api/v1/sites’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed.
This website is uploaded but I need to see its name and id in the response to the request.
Any ideas how to solve this or bypass through other ways to deploy .zip files to Netlify from inside Next/React app?
The code for uploading:
import React, { useState } from "react";
import axios from "axios";
export default function Home() {
const [file, setFile] = useState();
const changeHandler = (e: any) => {
e.preventDefault();
setFile(e.target.files[0]);
};
const handleSubmission = async () => {
const response = await axios.post("https://api.netlify.com/api/v1/sites", file, {
headers: {
Authorization: "Bearer <your NETLIFY personal access token>",
"Content-Type": "application/zip",
},
});
console.log(response);
};
return (
<div>
<input type="file" name="file" onChange={changeHandler} />
<div>
<button onClick={handleSubmission}>Submit</button>
</div>
</div>
);
}