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

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?

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.

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'
    }
});

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() {}

}

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:

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

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");

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();
});

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.

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();
});

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

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

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

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

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");   
    }
}

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.

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!