javascript - missing - XMLHttpRequest no puede cargar No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Origen ''http:// localhost: 3000'' Google maps
cors header ‘access-control-allow-origin’ missing (1)
Soy nuevo en React js. Estoy tratando de cambiar dinámicamente el mapa con una entrada respetada por el usuario. Pero para una solicitud de búsqueda de lugar específica, este error aumenta
XMLHttpRequest no puede cargar https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=undef ... ined & radius = 1000 & keyword = fdtbf & key = myapikey. No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, el origen '' http: // localhost: 3000 '' no tiene acceso permitido.
este es mi código de nodo js
import express from ''express'';
import path from ''path'';
import bodyParser from ''body-parser'';
//Import To Pord
import api from ''./routes/api'';
import auth from ''./routes/auth''
import cookieParser from ''cookie-parser'';
import {LoginCheck} from ''./middleware/authCheck'';
import cors from ''cors'';
//All Webpack Stuff
import webpackConfig from ''../../webpack.config.dev'';
import webpack from ''webpack'';
import webpackMiddleware from ''webpack-dev-middleware''
import webpackHotMidleware from ''webpack-hot-middleware'';
//Server Side Rendering Stuff
import {match, RouterContext } from ''react-router'';
import { Provider } from ''react-redux'';
import { dispatch } from ''redux'';
import { renderToString, renderToStaticMarkup } from ''react-dom/server'';
import reducer from ''../../src/client/Reducers'';
import routes from ''../client/routes'';
import thunk from ''redux-thunk'';
import { createStore ,applyMiddleware} from ''redux''
import React from ''react''
import Helmet from ''react-helmet'';
import serialize from ''serialize-javascript'';
//PassPort Stuff Import This
let app = express();
app.use(bodyParser.json());
app.use(express.static(''public''))
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true
}));
app.use(webpackHotMidleware(compiler));
app.use(cors());
app.use(cookieParser(''sdkhcvlsd684684JJJklvblsdkuvgblsduvblsidvksdjbvlsjvuywlsfvliusdgv''));
//Check Auth MiddleWare
app.use(LoginCheck)
//Passport Api
app.use(''/auth'',auth);
//Our Api
app.use(''/p'',api);
app.get(''/*'', (req, res,next) => {
// res.sendFile(path.join(__dirname, ''../../index.html''))
// Server Side Rendering Starts
match({routes:routes(),location:req.url},(err,redirectLocation,renderProps) => {
if (err) return next(err);
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search)
}
// if (!renderProps) {
// res.redirect(''/404'')
// }
const components = renderProps.components;
const Comp = components[components.length - 1].WrappedComponent;
const fetchData = (Comp && Comp.fetchData) || (() => Promise.resolve())
const initialState = {}
const store = createStore(reducer, initialState, applyMiddleware(thunk));
const { location, params, history } = renderProps
fetchData({ store, location, params, history }).then(() => {
const body = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
)
const state = store.getState();
// console.log(state)
let head = Helmet.rewind();
res.header(''Access-Control-Allow-Origin'', "*");
res.header(''Access-Control-Allow-Methods'', ''GET,PUT,POST,DELETE'');
res.header(''Access-Control-Allow-Headers'', ''Content-Type'');
res.send(`<!DOCTYPE html>
<html>
<head>
${head.title}
${head.meta}
${head.link}
</head>
<body>
<div id="app" >${body}</div>
<script>window.__STATE__=${JSON.stringify(state)}</script>
<script src="/bundle.js"></script>
</body>
</html>`)
})
.catch((err) => next(err))
})
});
app.listen(3000 ,() => {
console.log(''Listening'')
});
esta es mi solicitud axios
export function getPlaceFromCoords(term,coords) {
// https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=13.0826802,80.2707184&radius=500&keyword=parks&key=AIzaSyAZbur2hq7p3UxjYrA2_G4ctpswFi0pO3A
console.log(coords)
return dispatch => {
return axios.get(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${coords.lat},${coords.lng}&radius=1000&keyword=${term}&key=${config.MAP_API}`).then(response => {
return response.data
})
}
}
Los encabezados CORS no están configurados para el servicio web de la API de Places en los servidores backend de Google. Por lo tanto, no podrá llamar al servicio web de la API de Places desde el código JavaScript del lado del cliente debido a la política del mismo origen de los navegadores.
Para usar Places en JavaScript del lado del cliente, debe usar una biblioteca de lugares de la API de JavaScript de Google Maps. La biblioteca de lugares tiene una funcionalidad de búsqueda de texto, radar y cercana muy similar al servicio web correspondiente.
Para más detalles, consulte la documentación:
https://developers.google.com/maps/documentation/javascript/places
¡Espero eso ayude!