web-dev-qa-db-ja.com

webpack devサーバーのCORSの問題

使っています webpack-dev-server v1.10.1 Reduxプロジェクトを後押しするために、以下のオプションがあります。

contentBase: `http://${config.Host}:${config.PORT}`,
quiet: false,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: configWebpack.output.publicPath,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true}

JSでは、requestからsuperagentを使用してHTTP GET呼び出しを生成しています

request
          .get(config.APIHost + apiUrl)
          .set('Accept', 'application/json')
          .withCredentials()
          .end(function (err, res) {
                if (!err && res.body) {
                    disptach(() => {
                        return {
                            type: actionType || GET_DATA,
                            payload: {
                                response: res.body
                            }
                        }
                    });
                }
          });

しかし、私はCORSエラーを受け取りました：

XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5050' is therefore not allowed access

これを解決するための提案はありますか？どうもありがとう

reactjscorssuperagentwebpack-dev-server
26
haohcraft

Webpack-dev-server 1.15.Xを使用すると、設定ファイルで次の設定を使用できます。

devServer: {
   contentBase: DIST_FOLDER,
   port: 8888,
   // Send API requests on localhost to API server get around CORS.
   proxy: {
      '/api': {
         target: {
            Host: "0.0.0.0",
            protocol: 'http:',
            port: 8080
         },
         pathRewrite: {
            '^/api': ''
         }
      }
   }
},

この例では、すべての呼び出しをhttp://0.0.0.0:8888/api/*からhttp://0.0.0.0:8080/*にリダイレクトし、CORSを解決します

34
gyss

この問題を回避する別の方法は、必要なCORSヘッダーを開発サーバーに直接追加することです。

devServer: {
  ...
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}

ドキュメントリンク

26
jazmit

JavaScriptをlocalhost:5050から実行していますが、APIサーバーはlocalhost:8000です。これは同じOriginポリシーに違反するため、ブラウザはそれを許可しません。

CORSが有効になるようにAPIサーバーを変更するか 、またはwebpack-dev-の指示に従って 「既存のサーバーとの組み合わせ」の下のサーバーページ で、webpack-dev-serverおよび独自のAPIサーバーとアセットサービングを組み合わせます。

6
Michelle Tilley

同じ問題がありましたが、私のAPIはhttpsプロトコル（ https：// api ... 。）でした。 httpsでサーバーを起動し、 https：// localhost：808 を使用する必要がありました

devServer: {
  headers: {
    "Access-Control-Allow-Origin": "*",
    https: true
  }
  .....
}
0
stefan