web-dev-qa-db-ja.com

React / Webpackでプロキシを作成して外部APIを呼び出す方法

自分が管理していない外部APIにGETリクエストを発行したい。 APIのセキュリティのため、reactアプリはエンドポイントに直接ajaxリクエストを行うことができません。したがって、私は示されているように単純なプロキシを作成しようとしています here

ぼくの package.json fileは次のようになります。

{
  "name": "my-stack",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "https://gold-feed.com/paid/*": {
        "target": "https://gold-feed.com/paid",
        "changeOrigin": true
    }
  }
}

そして、私のajaxリクエストは次のようになります。

const apiUrl = 'https://gold-feed.com/paid/<apiID>/all_metals_json_usd.php';

jQuery.ajax({
  method: 'GET',
  url: apiUrl,
  success: (item) => {
    this.props.addItem(item);
  }
});

しかし、それは何もしていないようです。まだ次のエラーが発生します：

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

私は本質的に、ドキュメント化された here と同じ問題を抱えていますが、Steam APIにアクセスするためのプロキシを作成しようとしています。

ちなみに、私が使用しているcreate-react-appプロジェクトは、webpackを利用していると思います。

reactjswebpackproxycreate-react-app
7
reknirt

あなたはおそらくそれまでにそれを理解しましたが、他の人にとってここに私のために働いたものがあります：

"proxy": {
    "/proxy": {
        "target": "https://mybackend.com",
        "pathRewrite": {
                "^/proxy" : ""
        },
        "changeOrigin": true
    }
}

myreact.com/proxy/my/pathはmybackend.com/my/pathにリダイレクトされます

あなたの場合のエラーは、反応サーバーのパスではなく、プロキシのキーとして宛先を指定したことだと思います。

5
Antoine

外部APIをローカルホストにプロキシし、フロントエンドのオリジン（localhost：3000）を変更し、ターゲットサーバー、必要に応じてトークンを更新し、ノードjsで次のスクリプトを実行できます

const express = require('express');
const proxy = require('express-http-proxy');
const cors = require("cors");

const app = express();

app.use(
  cors({
    Origin: 'localhost:3000',
    credentials: false
  })
);

app.use('/', proxy('https://www.targetserver.com/', {
  proxyReqPathResolver: function (req) {
    return req.url;
  },
  proxyReqOptDecorator: function (proxyReqOpts, srcReq) {
    proxyReqOpts.headers = {'Authorization': 'Replace with JWT'};
    return proxyReqOpts;
  }
}))

app.get('/*',function(req,res,next){
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


app.listen(4000, () => console.log(`Server Listening on port ${4000}!`));

次のようなfontendアプリケーションで使用します（axiosまたはfetchを使用）。

axios.get('http://localhost:4000/api/route).then(x => console.log(x));
0
Mario Lucki

私の場合、私のAPIはAWSにデプロイされていましたが、その設定が見つかりました

"changeOrigin": true

必要でした（chrome＆Edgeは機能し、firefox（62.0.3）は「無効なCORSリクエスト」と不平を言いました）。

Webpack httpプロキシのドキュメントでは、彼らはこのオプションを言っています：（ https://github.com/chimurai/http-proxy-middleware ）

ヒント：名前ベースの仮想ホストサイトでは、オプションchangeOriginをtrueに設定します。

ノート：

  • 同じマシン上でローカルにAPIを実行する場合、Fire Foxにはそれを必要としませんでした。
  • firefoxはヘッダー「Origin」を追加します。ヘッダーを削除して再送すると、リクエストが機能しました。
  • 「changeOrigin」を追加しても副作用はないので、これからやります。

それがFirefoxのバグかどうかはわかりませんが、とにかく私の最終的な構成は次のとおりでした：

"proxy": {
  "/api": {
    "target": "<put ip address>",
    "changeOrigin" : true
  }
}

/ apiをAPIのパスに置き換えるか、上記の答えとしてパスを書き直す必要があります。

0
Bashar Ali Labadi