未在Google后端服务器上为Places APIWeb服务设置CORS标头。因此，由于浏览器的“同源”策略，您将无法从客户端JavaScript代码调用Places API Web服务。
为了在客户端JavaScript上使用Places，您必须使用Google Maps JavaScriptAPI的Places库。地方图书馆具有附近的雷达和文本搜索功能，与相应的Web服务非常相似。
有关更多详细信息，请查看文档：
https://developers.google.com/maps/documentation/javascript/places
希望能帮助到你！
解决方法我是React js的新手，我正在尝试根据用户输入来简单地动态更改地图，但是对于特定的位置搜索请求，此错误会上升
XMLHttpRequest无法加载https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=undef…ined＆radius= 1000＆keyword = fdtbf＆key = myapikey。所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问源’ http：// localhost：3000 ‘。
这是我的节点js代码
import express from ’express’;import path from ’path’;import bodyParser from ’body-parser’;//Import To Pordimport 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 Stuffimport webpackConfig from ’../../webpack.config.dev’;import webpack from ’webpack’;import webpackMiddleware from ’webpack-dev-middleware’import webpackHotMidleware from ’webpack-hot-middleware’;//Server Side Rendering Stuffimport {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 Thislet 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 MiddleWareapp.use(LoginCheck)//Passport Apiapp.use(’/auth’,auth);//Our Apiapp.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 } = renderPropsfetchData({ store,location,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 >${body}</div> <script>window.__STATE__=${JSON.stringify(state)}</script> <script src='https://www.6hehe.com/bundle.js'></script> </body> </html>`)}) .catch((err) => next(err)) })});app.listen(3000,() => { console.log(’Listening’)});
这是我的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}) }}
