XMLHttpRequest no puede cargar No hay encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado. Origen ‘http://localhost:3000’ mapas de Google

4 minutos de lectura

XMLHttpRequest no puede cargar No hay encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Origen 'http://localhost:3000' mapas de Google
Nane

Soy nuevo en React js. Estoy tratando de cambiar dinámicamente el mapa de manera simple con respecto a la entrada del usuario. Pero para la solicitud de búsqueda de un lugar específico, aparece este error.

XMLHttpRequest no puede cargar
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=undef…ined&radius=1000&keyword=fdtbf&key=myapikey. No hay ningún encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado. Origen ‘http://localhost:3000Por lo tanto, no se permite el acceso.

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="https://stackoverflow.com/bundle.js"></script>
            </body>
          </html>`)
        })
            .catch((err) => next(err))



    })
});


app.listen(3000 ,() => {
    console.log('Listening')
});

esta es mi solicitud de 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
        })
    }

}

  • Pídele al encargado del backend que implemente CORS. Nada que ver con reaccionar.

    – Ved

    08 abr.

  • Utilicé este medio ware app.use(cors()); pero no sirve

    – Nane

    08 abr.

  • Tienes que comprobar eso correctamente. Pero todo son cosas de fondo. No hay problema con Reactjs.

    – Ved

    08 abr.

  • Posiblemente ya respondido aquí. stackoverflow.com/questions/28359730/…

    –Todd Chaffee

    08 abr. 17 en 13:00

  • Posiblemente axios no es compatible con jsonp @ToddChaffee

    – Nane

    08 abr.


Los encabezados de CORS no están configurados para el servicio web de Places API en los servidores backend de Google. Por lo tanto, no podrá llamar al servicio web de Places API desde el código JavaScript del lado del cliente debido a la política del mismo origen de los navegadores.

Para usar Lugares 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 cerca, radar y texto muy similar al servicio web correspondiente.

Para obtener más detalles, consulte la documentación:

https://developers.google.com/maps/documentation/javascript/places

¡Espero eso ayude!

  • Entonces, ¿para qué sirve la sección de referencia del navegador web del panel de control de la consola de Google?

    – Arup Rakshit

    02 mayo 2020 a las 20:24

.

¿Ha sido útil esta solución?