Axios: tidak dapat membuat POST lintas situs berfungsi

Selain itu, saya juga menyetel withCredentials menjadi true di konfigurasi.

Saya baru saja mengalami masalah ini juga dan sepertinya itu hanya terjadi pada saya di Mac. Saya menghabiskan 3 hari dan malam yang baik mencoba men-debug jaringan saya dan memutuskan untuk mencoba ini menggunakan permintaan Vanilla XHR dan menyadari masalahnya bukan pada jaringan saya, tetapi aksio.

Saya juga melakukan permintaan lintas situs dengan kredensial disetel ke true. Melihat permintaan jaringan, Anda mendapatkan ERR_EMPTY_RESPONSE dan sepertinya permintaan itu gagal bahkan sebelum meninggalkan browser.

Ini adalah konfigurasi saya:

const myApi = axios.create({
  baseURL: 'http://someUrl/someEndpoint',
  timeout: 10000,
  withCredentials: true,
  transformRequest: [(data) => JSON.stringify(data.data)],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
});'

Jika saya mendapat kesempatan, saya akan mencoba untuk melihat ini lebih jauh.

Ah baguslah aku tidak gila. :) Silakan lihat ini jika memungkinkan.

Ternyata masalah saya tidak terkait dengan Axios. Cisco Anyconnect memblokir permintaan opsi dari mesin saya... karena alasan?

Permintaan lintas domain tidak memerlukan konfigurasi tambahan. Itu akan kembali menggunakan XDomainRequest untuk IE yang lebih lama. https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L22

Bisakah Anda memberikan detail lebih lanjut? Browser apa, OS, versi axios, pesan kesalahan apa pun.

Saya tidak dapat berbicara untuk Jenny tetapi sesuatu yang khusus perpustakaan ini menyebabkan permintaan diblokir oleh keamanan default Cisco Anyconnect yang berarti mungkin pengaturan keamanan lain melakukan ini juga. Saya mencoba melacak ini tetapi sejauh ini tidak berhasil.

Ini dapat direproduksi dengan membuat permintaan lintas situs pada mac yang diinstal dengan cisco Anyconnect dan mungkin klien VPN lainnya.

Lingkungan saya adalah:

• Aksio 0.8.1
• Kapten
• Chrome
• Pesan kesalahan: "Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta. Oleh karena itu, Origin ' http://localhost :3000' tidak diizinkan mengaksesnya."

Perhatikan bahwa permintaan yang sama berfungsi dengan curl.

Terima kasih telah menyelidiki ini!

Dengan CORS, permintaan preflight dibuat ke server untuk melihat apakah permintaan tersebut diizinkan. Anda harus meminta server Anda menanggapi permintaan yang memiliki OPTIONS sebagai metode permintaan dengan menyetel header Acces-Control-Allow-Origin: * yang akan mengizinkan permintaan dari asal mana pun. Atau Anda dapat mengizinkan hanya asal tertentu Acces-Control-Allow-Origin: http://example.com .

Ya aku mengerti itu. Tapi server itu bukan milikku. Saya menggunakan Baas (backend-as-a-service). Dan mereka telah menambahkan domain saya ke daftar yang diizinkan. Saya telah memeriksa bahwa orang lain yang menggunakan Baas tersebut tidak memiliki masalah seperti itu.

Saya hanya mengeluarkan pesan kesalahan yang Anda berikan, tetapi berdasarkan itu sepertinya Anda tidak memiliki hal-hal yang berfungsi untuk Anda. Itu tidak akan gagal menggunakan curl karena keamanan lintas asal hanyalah batasan di dalam browser.

Bisakah Anda membuka tab jaringan di browser Anda dan membagikan apa yang Anda dapatkan sebagai tanggapan atas permintaan OPSI? Semoga melihat data respons dan tajuk akan membantu men-debug masalah ini.

Terima kasih

Berikut adalah headernya:

Inilah tajuk respons dari GitHub ketika saya menggunakan aksioma untuk mendapatkan profil pengguna saya dari API mereka:

Anda dapat melihat bahwa GitHub menambahkan Access-Control-Allow-Origin: * . Respons dari Baas Anda tidak memiliki header tipe Access-Control .

Saya melihat saya melihat hmm. Maaf untuk jawaban yang sangat terlambat. Biarkan saya melihat ke dalam ini sedikit lebih. Terima kasih banyak.

Saya tidak yakin apakah yang saya lihat berhubungan atau tidak. Pada dasarnya, saya dapat mengirim permintaan auth ke server jarak jauh kami dan mendapatkan kembali cookie, tetapi kemudian panggilan berikutnya ke server _jangan_ mengirim cookie bersama mereka, mengakibatkan kesalahan.

Berikut adalah tajuk dari panggilan POST untuk masuk:

Dan sekarang panggilan GET tindak lanjut:

Alamat IP yang tercantum di bawah origin adalah milik saya sendiri, jadi seharusnya tidak menjadi masalah. Jika ini adalah tempat yang salah untuk ini, saya senang membuat masalah baru, atau melampirkan yang sudah ada yang sesuai.

Sebagai kerutan baru; Saya telah menguji panggilan GET tindak lanjut menggunakan XHR langsung, dan cookie dikirim dengan baik. Melakukan panggilan yang sama melalui Axios, bagaimanapun, menghasilkan masalah yang sama yang saya sebutkan di atas.

Ugh. Harap abaikan - saya tidak mengirim barang seperti yang diharapkan melalui Axios :)

Saya juga menghadapi masalah yang sama.
OPSI Panggilan masuk, tetapi panggilan POST macet ke dalam kor.
http://stackoverflow.com/questions/36907693/axios-cors-issue-with-github-oauth-not-getting-access-token

Bagaimana masalah BESAR seperti itu, tidak ditangani?

+1

+1

+1

+1

+1

+1

+1

@dsacramone apa masalah yang Anda lihat? Tampaknya sebagian besar masalah yang dilaporkan adalah masalah dengan server atau alarm palsu. Jika ada kesalahan yang dapat direproduksi yang dapat saya lihat, saya senang untuk memperbaikinya.

mendapatkan ini juga

XMLHttpRequest tidak dapat memuat https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish. Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta. Oleh karena itu, asal ' http://localhost :3000' tidak diizinkan akses.

juga mendapatkannya menggunakan fetch untuk dicatat. saya pikir chrome-nya baru-baru ini membuat kebijakan pengaturan permintaan mereka lebih ketat, saya pikir itu akan memerlukan semacam tajuk (tidak yakin apa).

inilah beberapa contoh (keduanya disajikan melalui https)

Contoh 1 - Berfungsi dengan baik

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Contoh 2 - Tidak berfungsi - menampilkan kesalahan?

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

inilah respons kesalahannya

[object Error] {
  config: [object Object] {
    data: undefined,
    headers: [object Object] { ... },
    maxContentLength: -1,
    method: "get",
    timeout: 0,
    transformRequest: [object Object] { ... },
    transformResponse: [object Object] { ... },
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish",
    validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
    },
    xsrfCookieName: "XSRF-TOKEN",
    xsrfHeaderName: "X-XSRF-TOKEN"
  },
  response: undefined
}

sesuatu yang mungkin relevan ada di transformResponse ? saya ingin tahu apa artinya bit PROTECTION_PREFIX?

[object Object] {
  0: function transformResponse(data) {
      /*eslint no-param-reassign:0*/
      if (typeof data === 'string') {
        data = data.replace(PROTECTION_PREFIX, '');
        try {
          data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
      }
      return data;
    }
}

bahkan mencoba

mode: 'tanpa-kor'
dalam pengambilan masih memberikan kesalahan ini

saya yakin jawabannya cukup sederhana dan hanya membutuhkan semacam tajuk, hanya tidak yakin apa, akan terus bermain-main.

api wikipedia mungkin hanya contoh miring, kesalahan yang sama pada orang lain?

Saya menghapus kode ini, dapat berfungsi: axios.defaults.withCredentials = true

Saya membuat api wikipedia berfungsi dengan baik dengan jsonp

var jsonp = require('jsonp');

// search for 'frog'
jsonp('https://en.wikipedia.org/w/api.php?action=opensearch&search=frog&format=json', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

Tidak diperlukan konfigurasi tambahan.

Mendapatkan kesalahan yang sama dengan axios. Inilah komponen Bereaksi saya:

import React, { Component } from 'react'
import axios from 'axios'

export default class User extends Component {
  constructor(props){
    super(props)

    // axios.defaults.withCredentials = true

    const config = {
    method: 'get',
    url: 'https://api.airbnb.com/v2/users/2917444?client_id=3092nxybyb0otqw18e8nh5nty&_format=v1_legacy_show',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    responseType: 'json',
    withCredentials: true,
  }

    axios.request(config)
      .then(response => { console.log('response: ', response) });

  }

  render() {
    return (
      <div>User</div>
    )
  }
}

_Catatan: Saya dapat menekan API dengan baik dengan permintaan Node._

Saya mengalami kesalahan yang sama dengan @Sinistralis . Pada versi terbaru chrome di Mac OSX saya mendapatkan net::ERR_EMPTY_RESPONSE pada permintaan CORS yang dibuat dengan benar (server saya menangani semua header CORS termasuk OPSI dengan baik). Aneh karena pada safari iOS10, kode yang sama persis berfungsi tanpa masalah. Akan mencoba menyelidiki sedikit lebih banyak sendiri untuk melihat bagaimana hal ini dapat diselesaikan.

Pada mac yang lebih lama (10.11) dengan chrome versi terbaru, saya tidak dapat mereproduksi kesalahan ini dengan kode yang sama persis. Ini memang sangat aneh. Anda mungkin dapat mereproduksi dengan mengunjungi aplikasi yang sangat sederhana ini: http://lights.suyashkumar.com dan memeriksa konsol (kode ada di sini . Pada beberapa mesin tidak akan ada kesalahan dan itu akan mengarahkan Anda untuk masuk. Pada mesin lain itu tidak akan mengarahkan ulang dan akan meninggalkan Anda di halaman utama.

Memecahkan kesalahan saya. Bagi saya, itu adalah masalah dengan menetapkan tajuk di config.headers dengan nilai nol pada awal aplikasi (itu menarik nilai dari penyimpanan lokal, dan awalnya, tidak ada apa-apa di sana). Menetapkan nilai menjadi string kosong ketika nilainya nol memecahkan masalah. Saya ingin tahu apakah ini sesuatu yang dapat atau harus ditangani dalam aksioma (tidak yakin apakah ada nilai dalam meneruskan header nol ke xhr jika rusak _kadang-kadang_).

Untuk orang lain dengan masalah serupa, saya menemukan bahwa beberapa klien VPN juga dapat memblokir permintaan OPSI (lihat di sini )

Kesalahan CORS yang menyesatkan masih dalam aksio. Polyfill fetch mendukung mode: 'no-cors' untuk memperbaiki masalah ini.

Kami perlu melakukan permintaan semacam ini untuk membuat permintaan terhadap mesin di lingkungan lain yang kami operasikan, serta pada mesin yang sama di port yang berbeda!

@dreki Harap berikan deskripsi masalah yang Anda sebutkan.

Anda tidak dapat melakukan apa pun di sisi klien, ketika server tidak menerima permintaan dari asal Anda. Jika Anda bisa, kami akan mengalami kebocoran keamanan besar di sini (dan dengan "kami" maksud saya seluruh internet)...

Saya pikir aksi dan reaksi benar-benar sesuai di sini.

Header Respons yang penting adalah Access-Control-Allow-Origin yang pada dasarnya menetapkan asal yang valid, yang diizinkan untuk memanggil layanan sisi server ini. Jika klien Anda tidak menelepon dari salah satu asal yang dikonfigurasi ini, permintaan akan ditolak dengan kesalahan konsol seperti ini:

XMLHttpRequest tidak dapat memuat http://localhost :8080/v1/api/search?q=candles. Tidak ada header 'Access-Control-Allow-Origin' pada sumber daya yang diminta. Oleh karena itu, Origin ' http://localhost :9999' tidak diizinkan mengakses.

Anda tidak ada dalam daftar tamu.

Memperbaiki masalah saya.
Sedang mencoba mengakses api ekspres saya di localhost:3000 dari aplikasi vue saya di localhost:8080 , tetapi mendapatkan kesalahan kembali.
Ternyata Anda perlu menambahkan http:// untuk membuatnya berfungsi.
Jadi gunakan http://localhost:3000 daripada localhost:3000 saat melakukan pengujian dev.

Saya memiliki masalah yang sama dengan wikimedia api. melihat ke halaman CORS mereka (https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains) Saya menambahkan Origin=* ke permintaan dan itu memperbaiki masalah.

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=Albert') .then(function(res) { console.log(res); }) .catch(function(err) { console.log('Error: =>' + err); })

Meskipun saya mendapat pesan kesalahan cors yang menakutkan, permintaan saya mengenai server.

XMLHttpRequest cannot load "...url here...". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Tim Axios, bisakah Anda memperbaikinya ???

@mellogarrett Ini bukan masalah terkait aksio. Baca ini: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Kutipan penting:

"Untuk alasan keamanan, browser membatasi permintaan HTTP lintas asal yang dimulai dari dalam skrip. Misalnya, XMLHttpRequest dan Fetch mengikuti kebijakan asal yang sama. Jadi, aplikasi web yang menggunakan XMLHttpRequest atau Fetch hanya dapat membuat permintaan HTTP ke domainnya sendiri. Untuk meningkatkan aplikasi web, pengembang meminta vendor browser untuk mengizinkan permintaan lintas domain."

Banyak dari mereka yang mengalami masalah ini mungkin tidak memiliki server yang menanggapi permintaan OPSI. Pastikan Anda memiliki penangan (dengan header CORS) untuk permintaan OPTIONS dan POST. Klien (axios) pertama-tama akan melakukan ping OPTIONS dan kemudian melakukan POST.

Saya mendapatkan kesalahan yang sama di Firefox, tetapi tidak di Chromium. Kemudian saya ingat NoScript ada di sana (di Firefox) mencegah permintaan ke server jauh. Jika Anda menginstal NoScript (atau plugin serupa), periksa dulu.
Dalam kasus saya, masalahnya tidak terkait dengan Axios. Terima kasih atas kerja bagusnya.

Untuk orang lain yang mencari perbaikan untuk masalah ini, saya memiliki semua gejala yang sama tetapi melacak masalahnya ke pengaturan php.ini di server.

Permintaan OPTIONS preflight saya berhasil dan diikuti oleh permintaan POST yang tepat tetapi saya masih mendapatkan No 'Access-Control-Allow-Origin' header is present on the requested resource... mirip dengan @mellogarrett . Ini tampak sangat aneh, jadi saya menggunakan plugin Chrome untuk menonaktifkan sementara perlindungan CORS. Setelah itu, saya bisa melihat masalahnya sebenarnya adalah kesalahan PHP:

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

Posting ini memiliki info lebih lanjut tentang masalahnya, tetapi singkatnya, jika Anda menggunakan PHP 5.6 Anda harus menghapus komentar always_populate_raw_post_data di php.ini Anda dan mengatur ke -1 . Semoga ini menghemat beberapa jam pemecahan masalah orang lain

Hai @daltonamitchell Sepertinya saya mengalami masalah yang sama (kondisi menunjukkan bahwa itu adalah masalah yang sama). Tapi saya bertanya-tanya: Bagaimana Anda mengetahui kesalahan data posting mentah adalah masalahnya? Saat menggunakan plugin chrome yang Anda sebutkan, permintaan CORS berjalan dan semuanya berfungsi dengan baik. Tetapi meskipun tajuk diatur dengan benar, saya tidak dapat membuatnya berfungsi tanpa plugin. Jadi mungkin pesan penghentian tidak ditampilkan tetapi masalahnya mungkin masih ada ...? Bisakah Anda memberi saran bagaimana cara memeriksanya?

@RT-TL plugin hanya digunakan untuk melihat konten respons tanpa CORS memblokirnya. Dalam kasus saya, untuk tujuan pengujian saya baru saja mengembalikan string seperti Hello World jadi setelah saya menonaktifkan CORS saya melihat sesuatu seperti

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0
Hello World

Pastikan Anda mengaktifkan peringatan PHP dengan menambahkan error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE) atau error_reporting(E_ALL) ke bagian atas metode pengontrol Anda. Jika Anda masih tidak melihat apa pun, saya hanya akan mencoba mengembalikan beberapa respons JSON sederhana untuk memeriksa apakah mereka terlihat seperti yang diharapkan.

Apakah ada yang masih mengalami masalah ini? Saya mengalami hal yang sama:

const instance = axios.create({
    baseURL: 'http://localhost/',
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'test',
        'X-Test': 'testing'
    }
})
axios.get('v2/portal/bar/foo?')

Header respons

HTTP/1.1 401 Unauthorized
Server: nginx/1.11.10
Date: Fri, 24 Mar 2017 07:12:13 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Headers: *

Minta tajuk

OPTIONS /v2/portal/bar/foo? HTTP/1.1
Host: localhost
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-test
Accept: */*
Referer: http://localhost:3000/dashboard/report
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6,nl;q=0.4,zh-TW;q=0.2,zh;q=0.2,zh-CN;q=0.2

Saya tidak tahu mengapa tidak ada header saya yang dikirim dengan benar.

Masalah yang sama di sini, permintaan OPSI dibuat, tetapi permintaan POST tidak.

TLDR: fetch berfungsi, axios tidak kecuali saya menggunakan JSON.stingify

Jadi saya juga telah melihat varian dari kesalahan ini di mana OPTIONS mengembalikan 200 dengan header yang disetel untuk permintaan lintas Asal, tetapi tidak ada POST yang dibuat. Saya menggunakan ekstensi ini dan mulai berfungsi seperti yang diharapkan. Tapi saya cukup yakin ada semacam masalah di sini. Perhatikan permintaan saya:

Server saya membalas dengan Access-Control-Allow-Origin: *
Berikut semua contoh dengan kode dan tangkapan layar:

Aksio:

axios.post('http://localhost:3001/card', { test: 'test' })

mengambil:

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: { test: 'test' },
    })

dengan JSON.stringify

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: JSON.stringify({ test: 'test' }),
    })

Saya dapat membuat axios berfungsi dengan JSON.stringify -ing data saya seperti:

    return axios.post('http://localhost:3001/card', JSON.stringify({ test: 'test' }));

Saya menghadapi masalah yang sama seperti yang dijelaskan @kwhitaker , axios tidak mengirim cookie saya dengan benar sehingga menghasilkan respons dengan informasi yang lebih sedikit (saya kira karena masalah keamanan). Di sisi lain, permintaan XHR reguler berfungsi dengan baik. Kemudian seperti yang disarankan @zlyi, saya baru saja menambahkan baris axios.defaults.withCredentials = true; dan semuanya mulai berfungsi seperti yang diharapkan.

Sudah mencoba semuanya dan masih mengalami masalah. :(

Sudah mencoba semuanya dan masih mengalami masalah. :(

telah mengelola masalah dengan menambahkan yang berikut ini ke .htaccsess :

<IfModule mod_headers.c> 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
</IfModule>

Saya dapat mengatasi ini dengan menggunakan proxy. Tambahkan proxy ke package.json

{
    "proxy": "http://some-url/some-endpoint"
}

Kemudian minta:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

Ini adalah masalah sisi server, harus memiliki 'Acces-Control-Allow-Origin': '*' di header respons Anda. Jika Anda menggunakan Express, dapat menggunakan npm-cors untuk implementasi yang lebih kuat/elegan.

+1 @ProfNandaa
saya telah membuat ekspor di server lokal saya

# cors.js file
module.exports = (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}

jadi saya menetapkan:
```
const cors = membutuhkan('cors');
router.use(kor);
````
sekarang lanjutkan ... terima kasih

Kesalahan akan terjadi ketika server tidak menerima permintaan OPTION.

Bagi mereka yang berkomentar mengatakan "Tambahkan penanganan permintaan OPSI ke server Anda", itu tidak berfungsi. Saya menjalankan lingkungan lokal yang memiliki penanganan permintaan OPSI diaktifkan.

Saya mengalami masalah ini secara identik dengan pengguna di atas, di mana Axios.post(url, obj) mengembalikan kesalahan terlarang CORS 403, tetapi memperbaruinya ke Axios.post(url, JSON.stringify(obj)) berfungsi dengan benar.

Saya sedang mengerjakan proyek tutorial sederhana dan mengalami kesulitan mengakses berbagai apis. Satu-satunya solusi yang saya temukan berfungsi adalah yang disebutkan oleh thiagodebastos di atas.

Saya hanya mengganti jsonp dengan get dan saya dapat mengakses data.

Saya memiliki masalah ini dan koa-cors adalah solusi sederhana! (npm-cors untuk pengguna Express menurut ProfNandaa)

Bagi mereka yang masih mengalami masalah dengan ini: Axios akan bekerja dengan baik dengan CORs , dengan permintaan OPTIONS, dengan JSON dikirim sebagai badan permintaan tanpa JSON.encoded , dan dengan cookie yang dikirim dan dipertahankan dengan benar, selama Axios dan server yang menanggapi permintaan dikonfigurasi dengan benar.

Butuh beberapa percobaan dan kesalahan yang membuat frustrasi, tetapi kami memiliki permintaan lintas domain yang berfungsi dengan baik dengan Axios.

Beberapa poin:

Agar permintaan berfungsi, pastikan

• Server merespons permintaan OPTIONS, seolah-olah responsnya adalah apa pun selain 200 dengan semua header yang benar disetel, permintaan "preflighted" akan gagal.

• Permintaan dibuat dengan header yang benar, dan server merespons dengan semua header yang diperlukan.

• Jika cookie/header otorisasi atau sertifikat klien TLS diperlukan, kirim allowCredentials ke true untuk permintaan Axios. Ini dapat dilakukan sebagai default ( axios.defaults.withCredentials = true ) atau per permintaan.

Contoh tajuk permintaan yang berhasil

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: GET

Contoh tajuk respons yang berhasil

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://your-origin-url.com

Kami secara bertahap menambahkan tajuk respons dan menemukan bahwa kami memiliki berbagai kesalahan yang sulit didiagnosis dan perilaku tak terduga dengan kombinasi yang berbeda

Tanpa Access-Control-Allow-Credentials: true cookie tidak dikirim atau dipertahankan, yang masuk akal setelah membaca halaman MDN untuk header itu

Membaca dokumentasi ini membantu.

Siapa pun yang mengalami masalah, ...Allow-Headers: Content-Type itu penting.

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: ...
Access-Control-Allow-Headers: Content-Type, Accept

Saya menggunakan ekstensi chrome ini bernama 'Allow-Control-Allow-Origin: *'
semoga bisa membantu masalah anda.

Bagi siapa saja yang tidak mengerti mengapa Axios TIDAK BISA memperbaiki kesalahan ini:

Ini bukan masalah Axios. Ini adalah masalah dengan browser. JS di browser akan menolak permintaan ke server yang tidak memiliki set header yang tepat. Jika Anda menggunakan ini dengan sesuatu seperti React pada klien maka jangan bingung, ini bukan masalah React atau Axios, ini hanyalah browser yang menghormati standar CORS.

JakeElder memberikan deskripsi yang baik tentang apa yang perlu Anda lakukan di sisi server API Anda di sini: https://github.com/mzabriskie/axios/issues/191#issuecomment -311069164

Jika Anda tidak memiliki kendali atas server yang Anda coba akses, Anda harus membuat server proxy untuk mengambil konten untuk Anda dan mengembalikannya dengan header yang benar.

Tidak yakin mengapa ini diterapkan. Memang menjengkelkan ketika Anda hanya ingin membuat permintaan ke server untuk mendapatkan beberapa info tetapi tidak bisa karena server tidak memiliki set header tertentu. Tampaknya sangat membatasi. Baiklah ...

@robins-eldo Sekali lagi, saya tidak percaya Anda benar.

Komentar asli saya:

For those commenting saying "Add OPTION request handling to your server", that does not work. I'm running a local environment that has OPTION request handling enabled.

I experienced this issue identically as a user above, where Axios.post(url, obj) returned the CORS 403 forbidden error, but updating that to Axios.post(url, JSON.stringify(obj)) worked correctly.

Jika itu sebenarnya masalah server, dan bukan masalah Axios, merangkai objek tidak akan berpengaruh, karena permintaan OPTIONS akan gagal.

@alexanderbanks

Tidak yakin tentang metode HTTP OPSI tetapi masalah khusus saya adalah bahwa saya memiliki klien Bereaksi yang mencoba POST ke API internal yang saya tulis (API internal menjadi server di sini). Saya terus mendapatkan kesalahan ini: Failed to load resource: Origin http://localhost:7149 is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8902/user-login due to access control checks.

Saya pikir ini mungkin masalah Axios jadi saya mencoba Unirest sebagai gantinya dan terus mendapatkan kesalahan yang sama. Jadi saya pikir itu pasti sesuatu yang lain. Tidak yakin apakah ini masalah browser atau Bereaksi, tetapi segera setelah saya menambahkan yang berikut ini ke server API saya (yang merupakan API Nodejs + Express), semuanya mulai bekerja dengan Axios dan Unirest di sisi klien:

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });

Mungkin pemahaman saya tentang apa yang sebenarnya terjadi di balik layar di sini agak terbatas, namun, sedikit kode di server ini memecahkan masalah bagi saya.

Pastikan server Anda tidak membatasi akses Origin terlalu banyak dan jika Anda merasa ingin menyiasatinya, coba ini:

    return axios(url, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

Saya pikir ada beberapa orang di sini yang bingung tentang cara kerja CORS. Namun, masalah aslinya bukan tentang CORS, atau setidaknya itu yang seharusnya menjadi masalah penting. Maksud saya, ketika Anda memiliki CORS yang dikonfigurasi dengan benar tetapi meskipun Posting tidak berfungsi, maka itu adalah masalah untuk dilaporkan, bukan bagaimana mengkonfigurasi server dengan benar

API bertingkah aneh. Semua permintaan GET cors berfungsi dengan "kredensial: benar".
Untuk permintaan POST, permintaan Asal yang sama berfungsi tanpa merangkai objek data sedangkan untuk permintaan CORS POST juga mulai berfungsi ketika saya merangkai objek data.

Tidak mendapatkan alasan yang tepat tetapi masalah terpecahkan untuk saya.

Maaf, tapi saya mengunci utas ini karena sepertinya kami melakukan lingkaran di sekitar topik yang sama. Jika Anda memiliki masalah khusus yang belum tercakup dalam masalah lain (masalah umum CORS karena kesalahan konfigurasi, permintaan POST dikirim sebagai JSON alih-alih kode urlen bentuk, dll.) silakan buka yang baru dengan detail spesifik.