web-dev-qa-db-ja.com

ReactJSのCORS問題を克服する方法

私はReact Application。内部的にAPIにアクセスすることはできません。私のコードです。

const response = axios({
   method: 'post',
   dataType: 'jsonp',
   url: 'https://awww.api.com',
   data: {
    'appToken':'',
    'request':{ 
        'applicationName':'ddfdf', 
        'userName':'[email protected]', 
        'password':'dfd', 
        'seasonIds':[1521ddfdfd5da02] 
     }
     }
    });
   return{
    type:SHARE_REVIEW,
    payload:'response'
 }
 }

添付されているのは私のWebPack.config.jsです

module.exports = {

entry: [
'./src/index.js'
 ],
output: {
  path: __dirname,
  publicPath: '/',
  filename: 'bundle.js'
},
module: {
 loaders: [{
  exclude: /node_modules/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015', 'stage-1']
  }
 },
 { test: /\.json$/, loader: "json-loader"}]
  },
 resolve: {
  extensions: ['', '.js', '.jsx']
 },
devServer: {
historyApiFallback: true,
contentBase: './'
},
node: {
 dns: 'mock',
 net: 'mock'
 },
 };
javascriptreactjscorsreduxaxios
8
mohan babu

理想的な方法は、CORSサポートをサーバーに追加することです。

別の jsonp モジュールを使用してみることもできます。私の知る限り、axiosはjsonpをサポートしていません。したがって、使用しているメソッドが有効なjsonpリクエストとして適格かどうかはわかりません。

CORSの問題に対する別のハック的な回避策があります。サーバーとクライアントの両方のプロキシとして機能するnginxサーバーでコードをデプロイする必要があります。 proxy_passディレクティブを使用してトリックを行います。特定のリクエストを処理するロケーションブロックがproxy_passになるようにnginxサーバーを設定するか、実際のサーバーにリクエストをリダイレクトします。 CORSの問題は通常、Webサイトドメインの変更が原因で発生します。クライアントの顔として機能する単独のプロキシがあり、サーバーの場合、ブラウザーはサーバーとクライアントが同じドメインに存在すると考えるようにだまされます。エルゴのCORS。

この例を考えてみましょう。

サーバーはmy-server.comで、クライアントはmy-client.comですnginxを次のように設定します：

// nginx.conf

upstream server {
    server my-server.com;
}

upstream client {
    server my-client.com;
}

server {
    listen 80;

    server_name my-website.com;
    access_log /path/to/access/log/access.log;
    error_log /path/to/error/log/error.log;

    location / {
        proxy_pass http://client;
    }

    location ~ /server/(?<section>.*) {
        rewrite ^/server/(.*)$ /$1 break;
        proxy_pass http://server;
    }
}

ここで、my-website.comは、コードにアクセスできるWebサイトの名前（プロキシWebサイトの名前）です。 nginxがこのように構成されたら。次のようにリクエストを変更する必要があります。

  • すべてのAPI呼び出しがmy-server.com/<API-path>からmy-website.com/server/<API-path>に変更されます

Nginxに慣れていない場合は、 documentation を実行することをお勧めします。

上記の構成で何が起こっているかを簡単に説明するには：

  • upstreamsは、リクエストがリダイレクトされる実際のサーバーを定義します
  • serverブロックは、nginxサーバーの実際の動作を定義するために使用されます。
  • 複数のサーバーブロックがある場合は、server_nameを使用して、現在の要求を処理するために使用されるブロックを識別します。
  • error_logおよびaccess_logディレクティブは、ログファイルの場所を定義するために使用されます（デバッグに使用）
  • locationブロックは、さまざまなタイプのリクエストの処理を定義します：
    1. 最初のロケーションブロックは、/で始まるすべてのリクエストを処理します。これらのリクエストはすべてクライアントにリダイレクトされます
    2. 2番目のロケーションブロックは、/server/<API-path>で始まるすべてのリクエストを処理します。このようなリクエストはすべてサーバーにリダイレクトされます。

注：ここで/serverは、クライアント側の要求とサーバー側の要求を区別するために使用されています。ドメインは同じであるため、リクエストを区別する他の方法はありません。そのようなすべてのユースケースで/serverを追加することを強制するような規則はないことに留意してください。他の文字列などに変更できます。 /my-server/<API-path>、/abc/<API-path>など

この手法でうまくいくはずですが、CORSサポートをサーバーに追加することを強くお勧めします。これは、このような状況を処理する理想的な方法だからです。

開発中にこれらすべてを行わない場合は、 this chrome拡張機能を使用します。開発中にクロスドメインリクエストを実行できるようにする必要があります。

7
Nahush Farkande

CORSと呼ばれるchromeプラグインによって一時的にこの問題を解決します。Btwバックエンドサーバーはフロントエンドリクエストに適切なヘッダーを送信する必要があります。

6
SaJed

「TraversyMedia」のチュートリアルで見つけた最も簡単な方法は、「 https://cors-anywhere.herokuapp.com in 'axios'または 'fetch' apiを使用することです。

https://cors-anywhere.herokuapp.com/{type_your_url_here}

例えば.

axios.get(`https://cors-anywhere.herokuapp.com/https://www.api.com/`)

あなたの場合、URLを次のように編集します

url: 'https://cors-anywhere.herokuapp.com/https://www.api.com',
4
Manoj Sharma

@Nahushの答え以外の別の方法、すでにExpress frameworkプロジェクトでは、リバースプロキシにNginxを使用しないようにすることができます。

より簡単な方法は express-http-proxy を使用することです

  1. 実行npm run buildバンドルを作成します。

    var proxy = require('express-http-proxy');

var app = require('express')();

//define the path of build

var staticFilesPath = path.resolve(__dirname, '..', 'build');

app.use(express.static(staticFilesPath));

app.use('/api/api-server', proxy('www.api-server.com'));

反応コードから「/ api/api-server」を使用してAPIを呼び出します。

そのため、そのブラウザはリクエストを別のサーバーに内部的にリダイレクトする同じホストにリクエストを送信し、ブラウザはそれが同じオリジンから来ていると感じます;）

2
niraj

http-proxy-middleware を使用して、CORSをバイパスするエクスプレスプロキシサーバーをセットアップできます。

const express = require('express');
const proxy = require('http-proxy-middleware');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname));
app.use('/proxy', proxy({
    pathRewrite: {
       '^/proxy/': '/'
    },
    target: 'https://server.com',
    secure: false
}));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'index.html'));
});

app.listen(port);
console.log('Server started');

反応するアプリから、すべてのリクエストは/ proxyエンドポイントに送信され、目的のサーバーにリダイレクトされます。

const URL = `/proxy/${PATH}`;
return axios.get(URL);
1
Harshad Ranganathan