Question

我正在尝试从https://maps.googleapis.com/maps/api/place/收到请求并且我一直收到此错误。

否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的访问。

我设置了标题：{＆＃39; Access-Control-Allow-Origin＆＃39;：＆＃39; *＆＃39;在我的webpack deve服务器中，但仍然收到错误。任何人都知道我可能在这里失踪以阻止此错误。

版本：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
            })
        ]
    };

Answer 1

webpack标头仅用于向本地服务器发出的请求（对http://localhost:3000的请求）。您向https://maps.googleapis.com/maps/api/place/发出请求，该请求不得支持跨源请求。

查看Google的documentation。快速查看表明他们希望API密钥永远不会发送到客户端浏览器，因此他们不允许跨源请求。

您可能需要创建自己的服务器，代表您的用户发出这些API请求。

从webpack localhost服务器

1 个答案: