web-dev-qa-db-ja.com

package.jsonのプロキシがフェッチリクエストに影響しない

Reactを使用して開発サーバーからデータを取得しようとしています。

クライアントをlocalhost:3001で実行し、バックエンドをport 3000で実行しています。

フェッチ要求：

 const laina = fetch('/api/users');
    laina.then((err,res) => {
      console.log(res);
    })

開発サーバーとwebpack-dev-serverを実行すると、次の出力が表示されます。

GET http://localhost:3001/api/users 404 (Not Found)

package.jsonでプロキシを指定しようとしたため、リクエストがAPIサーバーにプロキシされますが、何も変更されていません。

ここに私のpackage.jsonファイルがあります：

enter image description here

..およびwebpack.config： enter image description here

私のプロジェクトから他の何かを見たい場合は教えてください。申し訳ありませんが、何かが欠けていて徹底的ではない場合、これらのテクノロジーを使用するのはまだ初めてです。

node.jsapireactjsproxyrequest
10
Radoslav Naidenov

フェッチリクエストAPIのURLを変更して、完全なホスト名を与えることができます。

 fetch('http://localhost:3000/api/users')

また、バックエンドでCORSが有効になっていることを確認してください

Webpackを介してリダイレクトする場合は、devServer.proxy as

devServer: { 
    inline: true, 
    contentBase: './dist', 
    port: 3001, 
    proxy: { "/api/**": { target: 'http://localhost:3000', secure: false }  }
 }
11
Shubham Khatri

私はここでゲームに少し遅れていることを知っていますが、今後の参考のためにここに置いておきます。

DevServerプロキシを期待どおりに動作させるには、HTTP Acceptsヘッダーを「text/html」以外のものに指定する必要があります。これは、フェッチが2番目の引数として受け入れるinit-objectで行います。簡単な例：

fetch("/api/profile",{
    headers:{
        "accepts":"application/json"
    }
})
.then(res => {
    console.log(res);
    return res.json();
})
.then(json => console.log(json) )
.catch( a => { console.log(a) });

これは、WebPack Dev Serverは通常、コンテキスト/ネームスペースを使用して、提供するものと転送するものを区別するためです。 create-react-appスクリプトは、package.jsonファイルのプロキシパスから名前空間を抽出しません。代わりに、スクリプトには、HTTP GET以外の何かを使用する要求が転送されるという、考えられたデフォルトの動作があります。また、HTTP GETを使用するが、Acceptsヘッダーとしてtext/htmlを使用しないものはすべて転送されます。

その理由は、ほとんどのReactアプリはAJAX/Fetchを使用して一部のAPIと通信するSPA（シングルページアプリケーション）です。APIは通常、JSONまたはXMLを使用しますが、text/htmlは使用しません。

2
Canis

Package.jsonで

"proxy": {
    "/api/users": {
        "target": "http://localhost:3000"
    }
},
2
Jose Pinheiro

Webpack Dev Serverは devServer.proxy config プロキシ要求を制御するためのWebpack構成内。

0
Jonny Buchanan