-1

I'm trying do a get request from https://maps.googleapis.com/maps/api/place/ and I keep getting this error.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I set the headers: { 'Access-Control-Allow-Origin': '*' } in my webpack deve server but still getting the error. Anyone know what I might be missing here to stop this error.

Version: webpack 1.13.3

  var ExtractTextPlugin = require('extract-text-webpack-plugin');

    function getDevTool() {
        if (process.env.NODE_ENV !== 'production') {
            return 'source-map'; //enables source map
        }

        return false;
    }

    module.exports = {
        entry: {
            main: './src/scripts/index.js'
        },
        output: {
            filename: './build/scripts/[name].js'
        },
        devtool: getDevTool(),
        devServer: {
            port: 3000,
            hot: true,
            historyApiFallback: true,
          headers: { 'Access-Control-Allow-Origin': '*' }
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: 'node_modules',
                    loader: 'babel',
                    query: {
                        presets: ['react', 'es2015', 'stage-1']
                    }
                },
                {
                    test: /\.scss$/,
                    loader: ExtractTextPlugin.extract('css!sass')
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('build/styles/main.css', {
                allChunks: true
            })
        ]
    };
Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
me-me
  • 5,139
  • 13
  • 50
  • 91

1 Answers1

1

The webpack headers are only for requests made to your local server (requests to http://localhost:3000). You are making requests to https://maps.googleapis.com/maps/api/place/ which must not support cross origin requests.

Check with Google's documentation. A quick look shows that they expect an API key which should never be sent to client browsers hence why they don't allow cross origin requests.

You will likely need to create your own server that will make these API requests on behalf of your users.

gregnr
  • 1,222
  • 8
  • 11