javascript - XMLHttpRequest অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্স' শীর্ষক উপস্থিত নেই। উত্স 'http:// লোকালহোস্ট: 3000' গুগল মানচিত্র



node.js reactjs (1)

আমি প্রতিক্রিয়ার জেএসে নতুন আছি আমি ব্যবহারকারীর ইনপুটকে সম্মান জানিয়ে গতিশীলভাবে মানচিত্র পরিবর্তন করার চেষ্টা করছি তবে নির্দিষ্ট স্থানের সিচের অনুরোধের জন্য এই ত্রুটিটি বেড়ে যায়

এক্সএমএলএইচটিপিআরকুয়েস্ট https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=undef ইনড এবং ব্যাসার্ধ = 1000 এবং কীওয়ার্ড = fdtbf & কী = মাইপিকে load অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন' শিরোনাম উপস্থিত নেই। উত্স ' http: // লোকালহোস্ট: 3000 ' তাই অ্যাক্সেসের অনুমতি নেই।

এটি আমার নোড জেএস কোড

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')
});

এটি আমার অক্ষর অনুরোধ

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
        })
    }

}

Answer #1

সিওআরএস শিরোলেখগুলি গুগল ব্যাকএন্ড সার্ভারে প্লেসস এপিআই ওয়েব পরিষেবায় সেট করা নেই। সুতরাং আপনি ব্রাউজারগুলির একই-উত্স নীতির কারণে ক্লায়েন্ট সাইড জাভাস্ক্রিপ্ট কোড থেকে প্লেসগুলি এপিআই ওয়েব পরিষেবা কল করতে পারবেন না।

ক্লায়েন্ট সাইড জাভাস্ক্রিপ্টে স্থানগুলি ব্যবহার করার জন্য আপনাকে গুগল মানচিত্র জাভাস্ক্রিপ্ট এপিআইয়ের একটি স্থান লাইব্রেরি ব্যবহার করতে হবে। স্থান লাইব্রেরির নিকটবর্তী স্থান, রাডার এবং পাঠ্য অনুসন্ধান কার্যকারিতা সম্পর্কিত ওয়েব পরিষেবার সাথে খুব অনুরূপ।

আরও তথ্যের জন্য দয়া করে ডকুমেন্টেশনটি দেখুন:

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

আশা করি এটা সাহায্য করবে!






google-maps-api-3