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':'[email protected]',
'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'
},
};
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:
my-server.com/<API-path>
menjadi my-website.com/server/<API-path>
Jika Anda tidak terbiasa dengan nginx, saya sarankan Anda untuk membaca dokumentasi.
Untuk menjelaskan apa yang terjadi pada konfigurasi di atas secara singkat:
upstream
mendefinisikan server aktual kepada siapa permintaan akan dialihkanserver
digunakan untuk mendefinisikan perilaku aktual server nginx.server_name
digunakan untuk mengidentifikasi blok yang akan digunakan untuk menangani permintaan saat ini.error_log
dan access_log
digunakan untuk mendefinisikan lokasi file log (digunakan untuk debugging)lokasi
mendefinisikan penanganan berbagai jenis permintaan:/
semua permintaan ini dialihkan ke klien/server/<API-path>
. Kita akan mengarahkan semua permintaan tersebut ke server.Catatan: /server
di sini digunakan untuk membedakan permintaan sisi klien dari permintaan sisi server. Karena domainnya sama, tidak ada cara lain untuk membedakan permintaan. Ingatlah bahwa tidak ada konvensi yang memaksa Anda untuk menambahkan /server
dalam semua kasus penggunaan seperti itu. Ini dapat diubah ke string lain, misalnya /server-saya/<API-path>
, /abc/<API-path>
, dll.
Meskipun teknik ini akan berhasil, saya akan sangat menyarankan Anda untuk menambahkan dukungan CORS ke server karena ini adalah cara ideal untuk menangani situasi seperti ini.
Jika Anda ingin menghindari melakukan semua ini saat mengembangkan, Anda dapat menggunakan ekstensi chrome ini. Ini akan memungkinkan Anda untuk melakukan permintaan lintas domain selama pengembangan.
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
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;)