ReactJS外部から取得する

Question

私はReactjsでURLからjsonを取得するコンポーネントを作って、Axios、Fetch、Jsonp ...などのパッケージを試してみました。
AxiosとJsonpでCORSエラーが発生しました。問題を解決できません。
フェッチでは'mode': 'no-cors'でコルスを無効にできますが、データは収集されません。ここで

は私のコードです：

getData() { 

    const header = { 
     'Access-Control-Allow-Origin': '*', 
     'mode': 'no-cors' 
    }; 

    this.serverRequest = fetch('https://www.cryptopia.co.nz/Exchange/GetTradePairChart?tradePairId=5355&dataRange=2&dataGroup=60', header) 
     .then(response => response.json()) 
     .then(json => { 
      console.log(json); 
      this.setState({ 
       altcoinsData: json 
      }); 
     }).catch(e => { 
      console.log(e); 
     }); 
} 

エラー：

にSyntaxError：App.jsで入力 の予期しない終わり：

Answer 1

で30 あなたはWebPACKの-devのを使用している場合-server、CROSを避ける​​ためにwebpack.config.jsにプロキシサービスを追加します。

devServer: { 
     port: 8080, 
     stats: 'errors-only', 
     proxy: { 
      '/api': { 
       target: 'http://localhost:20404', //http://localhost:20403/', 
       secure: false 
      } 
     } 
} 

プロキシに必要なエンドポイントへのAJAXリクエストをHTTPプロキシ・ミドルウェアとの急行サーバを起動することができない場合。 expressとwebpackの設定を含むserver.jsサンプルを見つけてください。

は、それが役立ちます:)

var webpack = require('webpack'); 
var Agent = require('agentkeepalive'); 
var config = require('./webpack.config.js'); 
var https = require('https'); 
var proxy = require('http-proxy-middleware'); 
const express = require('express'); 
const path = require("path"); 
const webpackDevMiddleware = require('webpack-dev-middleware'); 

var app = express(); 
var compiler = webpack(config); 

app.use(
    '/api', 
    proxy({ 
     target: 'http://10.134.116.186:1521/', 
     changeOrigin: true, 
     agent: new Agent({ 
      maxSockets: 100, 
      keepAlive: true, 
      maxFreeSockets: 10, 
      keepAliveMsecs: 100000, 
      timeout: 6000000, 
      keepAliveTimeout: 90000 // free socket keepalive for 90 seconds 
     }) 
    }) 
); 
app.use(
    '/dist', 
    proxy({ 
     target: 'http://localhost:8080/', 
     changeOrigin: true, 
     agent: new Agent({ 
      maxSockets: 100, 
      keepAlive: true, 
      maxFreeSockets: 10, 
      keepAliveMsecs: 100000, 
      timeout: 6000000, 
      keepAliveTimeout: 90000 // free socket keepalive for 90 seconds 
     }) 
    }) 
); 
app.use(
    webpackDevMiddleware(compiler, { 
     hot: true, 
     historyApiFallback: true, 
     contentBase: config.output.path, 
     publicPath: config.output.publicPath, 
     headers: { 'Access-Control-Allow-Origin': '*' } 
    }) 
); 
app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname + '/index.html')); 
}); 

app.listen(7071, 'localhost', function(err, result) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('Webpack Dev Server is fired up!!'); 
});