Pertanyaan Cara melewatkan permintaan preflight OPTIONS di AngularJS


Saya telah mengembangkan aplikasi PhoneGap yang sekarang sedang diubah menjadi situs web seluler. Semuanya bekerja dengan lancar selain satu kesalahan kecil. Saya menggunakan API pihak ketiga tertentu melalui permintaan POST, yang berfungsi dengan baik di aplikasi, tetapi gagal dalam versi situs web seluler.

Setelah melihat lebih dekat sepertinya AngularJS (saya kira browser sebenarnya) adalah yang pertama mengirim permintaan OPSI. Saya belajar banyak hari ini tentang CORS, tetapi saya tidak bisa mencari cara untuk menonaktifkannya sama sekali. Saya tidak memiliki akses ke API itu (jadi perubahan di sisi itu tidak mungkin), tetapi mereka telah menambahkan domain yang saya kerjakan ke header Access-Control-Allow-Origin mereka.

Ini adalah kode yang saya bicarakan:

        var request = {
                language: 'fr',
                barcodes: [
                    {
                        barcode: 'somebarcode',
                        description: 'Description goes here'
                    }
                ]
            };
        }
        var config = {
            headers: { 
                'Cache-Control': 'no-cache',
                'Content-Type': 'application/json'
            }
        };
        $http.post('http://somedomain.be/trackinginfo', request, config).success(function(data, status) {
            callback(undefined, data);
        }).error(function(data, status) {
            var err = new Error('Error message');
            err.status = status;
            callback(err);
        });

Bagaimana saya bisa mencegah browser (atau AngularJS) mengirim permintaan OPSI dan langsung beralih ke permintaan POST yang sebenarnya? Saya menggunakan AngularJS 1.2.0.

Terima kasih sebelumnya.


76
2018-04-09 16:20


asal


Jawaban:


Preflight dipicu oleh Content-Type Anda application/json. Cara paling sederhana untuk mencegah hal ini adalah dengan mengatur Jenis Konten text/plain dalam kasusmu. application/x-www-form-urlencoded & multipart/form-data Content-Types juga dapat diterima, tetapi Anda tentu saja perlu memformat payload permintaan Anda dengan tepat.

Jika Anda masih melihat preflight setelah membuat perubahan ini, maka Angular mungkin menambahkan header X ke permintaan juga.


89
2018-04-09 16:35



Seperti yang dikatakan Ray, Anda dapat menghentikannya dengan memodifikasi header konten seperti -

 $http.defaults.headers.post["Content-Type"] = "text/plain";

Sebagai contoh -

angular.module('myApp').factory('User', ['$resource','$http',
    function($resource,$http){
        $http.defaults.headers.post["Content-Type"] = "text/plain";
        return $resource(API_ENGINE_URL+'user/:userId', {}, {
            query: {method:'GET', params:{userId:'users'}, isArray:true},
            getLoggedIn:{method:'GET'}
        });
    }]);

Atau langsung ke panggilan -

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'text/plain'
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

Ini tidak akan mengirim permintaan opsi pra-penerbangan apa pun.

CATATAN: Permintaan tidak boleh memiliki parameter header khusus, Jika header permintaan berisi header khusus, maka browser akan membuat permintaan pra-penerbangan, Anda tidak dapat menghindarinya.


12
2017-11-30 05:00



Saya pikir cara terbaik adalah memeriksa apakah permintaan adalah tipe "OPSI" kembali 200 dari ware menengah. Itu berhasil bagi saya.

express.use('*',(req,res,next) =>{
      if (req.method == "OPTIONS") {
        res.status(200);
        res.send();
      }else{
        next();
      }
    });

2
2017-10-20 23:54



Ketika melakukan jenis permintaan AJAX lintas domain tertentu, browser modern yang mendukung CORS akan memasukkan permintaan "preflight" ekstra untuk menentukan apakah mereka memiliki izin untuk melakukan tindakan. Dari contoh kueri:

$http.get( ‘https://example.com/api/v1/users/’ +userId,
  {params:{
           apiKey:’34d1e55e4b02e56a67b0b66’
          }
  } 
);

Sebagai hasil dari fragmen ini kita dapat melihat bahwa alamat dikirim dua permintaan (OPSI dan GET). Tanggapan dari server termasuk header yang mengonfirmasi permisalan permintaan GET. Jika server Anda tidak dikonfigurasi untuk memproses permintaan OPSI dengan benar, permintaan klien akan gagal. Sebagai contoh:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: accept, origin, x-requested-with, content-type
Access-Control-Allow-Methods: DELETE
Access-Control-Allow-Methods: OPTIONS
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Methods: GET
Access-Control-Allow-Methods: POST
Access-Control-Allow-Orgin: *
Access-Control-Max-Age: 172800
Allow: PUT
Allow: OPTIONS
Allow: POST
Allow: DELETE
Allow: GET

0
2018-03-18 14:10



pengaturan tipe konten ke tidak terdefinisi akan membuat javascript melewati data header Seperti itu, dan lebih dari menulis konfigurasi header $ 12Provider angular default. Angular $ http Documentation

$http({url:url,method:"POST", headers:{'Content-Type':undefined}).then(success,failure);

-1
2018-06-17 12:23