Cara mengatasi masalah CORS di ReactJS

Saya mencoba melakukan panggilan API melalui Axios di Aplikasi React saya, namun saya mendapatkan masalah CORS ini di browser saya. Saya bertanya-tanya apakah saya dapat menyelesaikan masalah ini dari sisi klien karena saya tidak memiliki akses ke API secara internal.

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

Terlampir adalah WebPack.config.js saya

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'
 },
 };
Pemrograman
javascript reactjs redux cors axios
18 April 2017 в 2:01
5 tayangan
Larutan

Cara yang ideal adalah dengan menambahkan dukungan CORS ke server Anda.

Anda juga bisa mencoba menggunakan modul jsonp yang terpisah. Sejauh yang saya tahu axios tidak mendukung jsonp. Jadi saya tidak yakin apakah metode yang Anda gunakan akan memenuhi syarat sebagai permintaan jsonp yang valid.

Ada pekerjaan hackish lain di sekitar untuk masalah CORS. Anda harus menerapkan kode Anda dengan server nginx yang berfungsi sebagai proxy untuk server dan klien Anda. Hal yang akan melakukan trik ini adalah arahan proxy_pass. Konfigurasikan server nginx Anda sedemikian rupa sehingga blok lokasi yang menangani permintaan khusus Anda akan proxy_pass atau mengarahkan permintaan Anda ke server Anda yang sebenarnya. Masalah CORS biasanya terjadi karena perubahan domain situs web. Ketika Anda memiliki proxy tunggal yang berfungsi sebagai wajah klien dan server Anda, browser tertipu untuk berpikir bahwa server dan klien berada di domain yang sama. Ergo tidak ada CORS.

Pertimbangkan contoh ini.

Server Anda adalah my-server.com dan klien Anda adalah my-client.com Konfigurasikan nginx sebagai berikut:

// 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;
    }
}

Di sini my-website.com akan menjadi nama situs web yang dihasilkan di mana kode akan dapat diakses (nama situs web proxy). Setelah nginx dikonfigurasi dengan cara ini. Anda perlu memodifikasi permintaan sedemikian rupa:

  • Semua panggilan API berubah dari `my-server.com/
Komentar (0)

Sementara menyelesaikan masalah ini dengan plugin chrome yang disebut CORS. Btw server backend harus mengirim header yang tepat ke permintaan front end.

Komentar (1)

Cara lain selain jawaban @Nahush'jika Anda sudah menggunakan Express framework dalam proyek maka Anda dapat menghindari penggunaan Nginx untuk reverse-proxy.

Cara yang lebih sederhana adalah dengan menggunakan express-http-proxy

  1. Jalankan npm run build untuk membuat bundle.

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

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

 //definisi jalur pembangunan

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

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

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

Gunakan "/api/api-server" dari kode react untuk memanggil API.

Jadi, browser tersebut akan mengirimkan permintaan ke host yang sama yang akan secara internal mengarahkan permintaan ke server lain dan browser akan merasa bahwa permintaan tersebut berasal dari asal yang sama;)

Rvy Pandey
Jawaban edit 8 Januari 2019 в 7:14
Komentar (0)