webpack localhostサーバからgoole apiを使用した場合のAccess Control-Allow-Originエラー

Question

私はhttps://maps.googleapis.com/maps/api/place/から取得リクエストを試みており、このエラーが発生し続けています。

要求された リソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン 'http://localhost:3000'は許可されません。

Webpack deveサーバーで{'Access-Control-Allow-Origin'： '*'}ヘッダーを設定しましたが、まだエラーが発生しています。誰もがこのエラーを止めるために私がここで紛失しているかもしれないことを知っている。

バージョン：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要求を行う独自のサーバーを作成する必要があります。