Bidang header permintaan Access-Control-Allow-Header tidak diizinkan oleh Access-Control-Allow-Header


224

Saya mencoba untuk mengirim file ke server saya dengan permintaan posting, tetapi ketika dikirim itu menyebabkan kesalahan:

Bidang tajuk permintaan Konten-Jenis tidak diizinkan oleh Access-Control-Allow-Header.

Jadi saya mencari kesalahan di Google dan menambahkan header:

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

Lalu saya mendapatkan kesalahan:

Bidang tajuk permintaan Access-Control-Allow-Origin tidak diizinkan oleh Access-Control-Allow-Header

Jadi saya meng-google-kannya dan satu-satunya pertanyaan serupa yang bisa saya temukan adalah memberikan jawaban setengah kemudian ditutup sebagai topik. Header apa yang harus saya tambahkan / hapus?


Header ini dikirim dari server ke browser sehingga browser dapat memutuskan apakah JS diizinkan untuk mem-parsing respons. Menambahkannya ke permintaan tidak memiliki nilai.
pellyadolfo

Jawaban:


189

The Server (bahwa permintaan POST dikirim ke) perlu menyertakan Access-Control-Allow-Headersheader (dll) dalam tanggapannya . Menempatkan mereka dalam permintaan Anda dari klien tidak berpengaruh.

Ini karena terserah server untuk menentukan bahwa ia menerima permintaan lintas-asal (dan bahwa ia mengizinkan Content-Typeheader permintaan, dan sebagainya) - klien tidak dapat memutuskan sendiri bahwa server yang diberikan harus mengizinkan CORS.


5
Bagaimana cara mengatur header di backend?
user3194367

11
@ user3194367: Tergantung pada backend Anda.
Felix Kling

15
Saya kira saya harus berbicara dengan pria server saya.
user3194367

2
response.addHeader ("Access-Control-Allow-Headers", "yourKey");
Mayuresh

2
@ Mayuresh yourKey adalah apa? Content-Type?
zhuguowei

240

Saya memiliki masalah yang sama. Dalam dokumentasi jQuery saya menemukan:

Untuk permintaan lintas domain, pengaturan jenis konten apa pun selain application/x-www-form-urlencoded, multipart/form-dataatau text/plainakan memicu browser untuk mengirim PILIHAN preflight meminta ke server.

Jadi, meskipun server memungkinkan permintaan lintas asal tetapi tidak memungkinkan Access-Control-Allow-Headers, itu akan melempar kesalahan. Secara default jenis konten sudut adalah application/json, yang mencoba mengirim permintaan OPSI. Cobalah untuk menimpa tajuk standar sudut atau mengizinkan Access-Control-Allow-Headersdi ujung server. Berikut ini adalah contoh sudut:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

28
Ini harus menjadi jawaban yang diterima, jauh lebih informatif daripada yang lain!
Mike Szyndel

1
Saya ingin multipart / formulir-data karena saya ingin menghapus sesuatu
Vlado Pandžić

3
or allow Access-Control-Allow-Headers in server endbagaimana?
Omar

1
@omar tergantung pada platform server apa yang Anda gunakan. jika java ada contoh pada jawaban lain jika php maka ada nama fungsi headeruntuk mengatur tajuk jawaban
Fisherman

1
Akhirnya, setelah dua hari penelitian. Saya tidak punya kata-kata untuk berterima kasih!
Mekey Salaria

51

Jika itu membantu siapa pun, (bahkan jika ini agak buruk karena kami hanya harus mengizinkan ini untuk tujuan dev) di sini adalah solusi Java karena saya mengalami masalah yang sama. [Sunting] Jangan gunakan wildcard * karena ini adalah solusi yang buruk, gunakan localhostjika Anda benar-benar perlu memiliki sesuatu yang berfungsi secara lokal.

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

Seperti disaksikan oleh beberapa jawaban untuk Akses-Kontrol-Permintaan-Header, ada perbedaan jelas karena lingkungan yang berbeda. Apa yang berhasil bagi saya adalah untuk mendapatkan akses ke objek permintaan dan membuang nilai-nilai untuk header, tetapi secara khusus nilai header untuk "Access-Control-Request-Headers". Kemudian, salin / tempel ini ke response.setHeader Anda ("Access-Control-Allow-Headers", "{paste di sini}"); Saya juga menggunakan Java, tetapi saya membutuhkan nilai tambahan dan beberapa yang disebutkan dalam jawaban ini saya tidak perlu.
Perangkat Lunak Nabi

Ini adalah solusi parsial (dan seperti yang dikatakan, buruk) untuk membantu orang dan membagikan petunjuk setahun yang lalu. Saya tidak melihat titik untuk memilih, tapi ini adalah kebebasan Anda. Idenya adalah untuk memungkinkan header di sisi server sehingga ketika permintaan OPSI diposting, klien / browser tahu header mana yang diizinkan. Saya mengakui ada sedikit kebingungan, filter CORS saya telah banyak berubah sejak saat itu. Sebagai praktik yang lebih baik, Access-Control-Allow-Origin tidak boleh *; dalam implementasi saya, diset oleh properti.
lekant

Solusinya telah diedit untuk memasukkan praktik terbaik
lekant

16

Server (tempat permintaan POST dikirim) perlu menyertakan header Tipe-Konten dalam responsnya.

Berikut daftar tajuk khas untuk disertakan, termasuk satu tajuk "X_ACCESS_TOKEN" khusus:

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

Itulah yang perlu dikonfigurasikan oleh server http Anda untuk server web tempat Anda mengirim permintaan.

Anda mungkin juga ingin meminta orang server Anda untuk mengekspos tajuk "Panjang Konten".

Dia akan mengenali ini sebagai permintaan Cross-Origin Resource Sharing (CORS) dan harus memahami implikasi membuat konfigurasi server tersebut.

Untuk detail lihat:


13

Anda dapat mengaktifkan tajuk yang tepat dalam PHP dengan ini:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

4
Tolong jelaskan bagaimana jawaban Anda berbeda dengan jawaban lainnya. Memposting beberapa kode saja tidak terlalu membantu.
oscfri

1
Anda adalah bintang rock, sisa jawaban mempelajari sisi teknis. Anda memperbaiki masalah saya, dengan menentukan metode yang harus diizinkan juga!
Daniel ZA

1
@DanielZA meskipun saya mengerti apa yang Anda maksud dengan "jawaban lain menyelidiki sisi teknis" karena Anda hanya ingin membuat kode Anda berjalan, SO dimaksudkan untuk menggali ke sisi teknis hal-hal karena Anda harus tahu mengapa semuanya bekerja bukan hanya cara membuatnya lalu bekerja. Jangan simpan perilaku ini ketika mengomentari solusi ...
nicolasassi

8

Berikut ini berfungsi untuk saya dengan nodejs:

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

Apakah urutan Access-Control-Allow-Methods penting?
vini

@vini, saya pikir itu tidak masalah.
Ninja Coding

4

Header yang Anda coba atur adalah header respons . Mereka harus disediakan, sebagai tanggapan, oleh server yang Anda ajukan permintaan.

Mereka tidak memiliki tempat yang ditetapkan pada klien. Tidak ada gunanya memiliki cara untuk memberikan izin jika mereka dapat diberikan oleh situs yang menginginkan izin alih-alih situs yang memiliki data.


Bagaimana cara mengatur header di backend?
user3194367

@ user3194367 - Tergantung pada backend Anda. Saya tidak tahu server HTTP atau bahasa pemrograman tempat Anda membuat permintaan.
Quentin

Saya kira saya harus berbicara dengan pria server saya.
user3194367

3

Jika ada yang mengalami masalah ini dengan server ekspres, tambahkan middleware berikut

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

3

jika Anda menguji beberapa permintaan javascript untuk ionic2 atau angularjs 2, di chrome Anda di pc atau mac, maka pastikan Anda menginstal plugin CORS untuk browser chrome untuk memungkinkan cross origin.

mayba mendapatkan permintaan akan bekerja tanpa perlu itu, tetapi posting dan menempatkan dan menghapus akan meminta Anda untuk menginstal plugin kors untuk pengujian untuk pergi tanpa masalah, yang pasti tidak keren, tetapi saya tidak tahu bagaimana orang melakukannya tanpa plugin CORS.

dan juga pastikan json response tidak mengembalikan 400 oleh beberapa status json


3

ini masalah backend. jika menggunakan layar api pada perubahan backend cors.js dan tambahkan diajukan di sini

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

3

Di Asp Net Core , untuk membuatnya berfungsi dengan cepat untuk pengembangan; di Startup.cs, Configure methodtambahkan

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

2

Dalam kasus saya, saya menerima beberapa parameter sebagai @ HeaderParam menjadi metode layanan web.

Parameter ini HARUS dinyatakan dalam filter CORS Anda seperti itu:

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

2

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headerskesalahan berarti bahwa Access-Control-Allow-Originbidang tajuk HTTP tidak ditangani atau diizinkan oleh respons. Hapus Access-Control-Allow-Originbidang dari tajuk permintaan.


2

Jika Anda menggunakan localhostdan PHP mengatur ini untuk menyelesaikan masalah:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

Dari penggunaan front-end Anda:

{headers: {"Content-Type": "application/json"}}

dan booming tidak ada lagi masalah dari localhost!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.