XMLHttpRequest无法加载否请求的资源上存在“Access-Control-Allow-Origin”标头。 Origin'http：// localhost：3000'谷歌地图
我是新来的React JS我试图简单地dynamic改变地图尊重用户input但是对于特定的地方请求这个错误上升
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 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') }); 这是我的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 }) } }
Google后端服务器上的Places API Web服务未设置CORS标头。 因此，由于浏览器的“同源”策略，您将无法从客户端JavaScript代码调用Places API Web服务。
为了在客户端JavaScript上使用Places，您必须使用Google Maps JavaScript API的Places库。 地方图书馆附近，雷达和文本searchfunction非常类似于相应的networking服务。
有关更多详细信息，请查看文档：
https://developers.google.com/maps/documentation/javascript/places
希望能帮助到你！