Next.js: localhost:3000 has been blocked by CORS policy

[aesthytik]

Bug report

Describe the bug

I added google autosuggestions API in my nextjs app and it gave me following error

'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=jalandhar&key=API KEY' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Please help or provide some other solution. i want to add google search in my web app.

System information

• OS: macOS
• Browser:Chrome
• Version of Next.js: latest

[Timer]

Hi, this is a general web development question that is unrelated to Next.js.

You may find help or a solution on Stack Overflow or by asking in our community Spectrum.

That said, you probably need to create an API route that proxies this google API.

[alanlupsha]

You should update the next.js tutorial with a recommended fix to continue to lesson:

https://nextjs.org/learn/basics/fetching-data-for-pages/fetching-data-for-pages

[carloscuesta]

For anyone who is facing this, always check the Next.js examples folder, since there is a lot of things solved like this one

@alanlupsha

https://github.com/zeit/next.js/tree/canary/examples/with-custom-reverse-proxy

[sapphireJena]

@aesthytik,

I solved by doing the following steps:

1) $ npm install --save-dev http-proxy-middleware
https://www.npmjs.com/package/http-proxy-middleware

2) Create setUpProxy.js in your react src folder.

3) Add this content in setUpProxy.js that you just created.

const { createProxyMiddleware } = require('http-proxy-middleware');

// restream parsed body before proxying
var restream = function(proxyReq, req, res, options) {
if (req.body) {
let bodyData = JSON.stringify(req.body);
// incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
proxyReq.setHeader('Content-Type','application/json');
proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
// stream the content
proxyReq.write(bodyData);
}
};
module.exports = function(app) {
app.use(
createProxyMiddleware("/(your targetted path)",{
target:"(your targetted domain name)",
secure:false,
changeOrigin:true,
onProxyReq:restream
})
);

//if you have more than one url, add app.use as much as you want as shown below
app.use(
createProxyMiddleware("/(your targetted path)",{
target:" (your targetted domain name)",
secure:false,
changeOrigin:true,
onProxyReq:restream
})
);
};

4) Restart your app with "npm start".

Hope you find this helpful!