This is an example when you develop a website with NextJS and want to create a cors proxy in your website.
- How to create cors proxy in your website
- How to use cors proxy in your website
- How to run this demo on your local
- How to support this project
- create an api folder in pages folder.
./pages/api/
- create a file
cors.js
in api folder../pages/api/cors.js
- add this code in
cors.js
.
import fetch from "isomorphic-unfetch";
const Cors = async (req, res) => {
const { url } = req.query;
try {
const resProxy = await fetch(url);
res.status(200).send(resProxy.body);
} catch (error) {
res.status(400).send(error.toString());
}
};
export default Cors;
- In this demo, I use fetch from
isomorphic-unfetch
package.- Because, it's easy to write same code
fetch
on client and server.
- Because, it's easy to write same code
- Normally, you fetch the url on client side like this.
const res = await fetch("https://example.com/");
- But now, you have cors proxy api in your server.
- So, you have to change your url by add the cors api and use the website domain you want to fetch as
url
parameter.
- So, you have to change your url by add the cors api and use the website domain you want to fetch as
const res = await fetch("/api/cors?url=https://example.com/");
- You can download or fork this repo, then
yarn
ornpm install
for installing package frompackage.json
config file. - Now, you can start the local server with
yarn dev
ornpm run dev
. After that, please open the browser and go tolocalhost:3000
, then you can try the demo with yourself.
- If you like this project, you can donate by this link.
- Hope you happy with this project.