Javascript XMLHttpRequest无法加载No';访问控制允许原点';请求的资源上存在标头。原产地';http://localhost:3000' 谷歌地图
我对React js是新手,我正在尝试简单地根据用户输入动态更改地图,但对于特定地点搜索请求,此错误会出现 无法加载XMLHttpRequest …ined&radius=1000&keyword=fdtbf&key=myapikey。 请求的服务器上不存在“Access Control Allow Origin”标头 资源。因此,不允许使用源“” 进入 这是我的节点js代码Javascript XMLHttpRequest无法加载No';访问控制允许原点';请求的资源上存在标头。原产地';http://localhost:3000' 谷歌地图,javascript,node.js,reactjs,google-maps,google-maps-api-3,Javascript,Node.js,Reactjs,Google Maps,Google Maps Api 3,我对React js是新手,我正在尝试简单地根据用户输入动态更改地图,但对于特定地点搜索请求,此错误会出现 无法加载XMLHttpRequest …ined&radius=1000&keyword=fdtbf&key=myapikey。 请求的服务器上不存在“Access Control Allow Origin”标头 资源。因此,不允许使用源“” 进入 这是我的节点js代码 import express from 'express'; import path from 'path'; impo
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')
});
没有为Google后端服务器上的Places API web服务设置CORS头。因此,由于浏览器的同源策略,您将无法从客户端JavaScript代码调用Places API web服务 为了在客户端JavaScript上使用Places,您必须使用Google Maps JavaScript API的Places库。places library具有与相应web服务非常相似的邻近、雷达和文本搜索功能 有关更多详细信息,请参阅文档:
希望有帮助 请后端人员实现CORS。与react无关。我使用了这个中间件应用程序。使用(cors());但是没有用,你需要好好检查一下。但都是后台的东西。没有问题,可能已经回答了。可能axios不支持jsonp@toddchaffee那么google控制台仪表板web浏览器引用部分的用途是什么?
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
})
}
}