cURL tidak menerapkan aturan CORS. Aturan tersebut diberlakukan oleh browser untuk tujuan keamanan.

Ketika Anda menyebutkan bahwa Anda menambahkan tajuk yang relevan, saya menganggap maksud Anda Anda menambahkan tajuk itu ke permintaan. Sebenarnya, tajuk diharapkan dalam tajuk respons dari server, yang menunjukkan bahwa sumber daya diizinkan untuk diakses oleh situs web lain secara langsung.

FYI, CORS - Berbagi Sumber Daya Lintas Asal. Karena API Anda tidak mendukungnya, Anda memiliki dua opsi -

1. Gunakan server proxy di domain yang sama dengan halaman web Anda untuk mengakses API 4chan atau,
2. Gunakan server proxy di domain lain mana pun, tetapi ubah respons untuk menyertakan header yang diperlukan.

Saya ingin memilih untuk menutup masalah ini sebagai "Bukan masalah".

Terima kasih atas sarannya. Saya telah memperbarui kode saya untuk merutekan permintaan melalui proxy:

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

Namun, saya masih mendapatkan kesalahan ini:

Permintaan Lintas Asal Diblokir: Kebijakan Asal yang Sama melarang membaca sumber daya jarak jauh di https://a.4cdn.org/a/threads.json. (Alasan: tajuk CORS 'Access-Control-Allow-Origin' tidak cocok dengan 'https://boards.4chan.org').

Saya telah mencari melalui berbagai forum dan pertanyaan tentang Stack Overflow dan sepertinya saya tidak dapat menemukan solusi untuk ini. Akan sangat dihargai jika seseorang dapat memberikan beberapa wawasan.

Ada berita tentang ini? Saya cukup banyak di perahu yang sama ...

Permintaan Lintas Asal Diblokir: Kebijakan Asal yang Sama melarang membaca sumber daya jarak jauh di https://a.4cdn.org/a/threads.json. (Alasan: tajuk CORS 'Access-Control-Allow-Origin' tidak cocok dengan 'https://boards.4chan.org').

Ini karena https://a.4cdn.org dan https://boards.4chan.org dianggap sebagai domain yang berbeda. Perbedaannya ada pada a dan papan

Saya juga mendapatkan masalah yang sama. Adakah yang bisa tolong bantu saya dalam hal ini

saaaaam

Sebagai solusi sementara, Anda dapat menggunakan ini: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Saya tidak menemukan sesuatu yang lebih baik untuk saat ini ..

@PetitBateau Saya tidak yakin bagaimana ekstensi Chrome akan membantu mengirim permintaan melalui axios.

@adl1995 Itu berhasil untuk saya ;)

Ekstensi Chrome hanya membantu mereka yang memiliki ekstensi. Bergantung pada ekstensi Chrome dalam produksi bukanlah ide yang baik, karena tidak semua orang memiliki ekstensi itu.

Itu sebabnya saya mengatakan itu adalah solusi sementara. Dan tentu saja untuk lingkungan pengembang.

Access-Control-Allow-Origin adalah header respons, bukan header permintaan:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, { headers: {'Access-Control-Allow-Origin': *} } ) tidak berarti apa-apa!

mencoba
axios.get(url, { crossdomain: true })

@ronnin Sebagai catatan, saya mencoba solusi Anda, tetapi tidak berhasil.

Layanan jarak jauh tempat Anda membuat permintaan AJAX tidak menerima permintaan AJAX asal silang dari domain Anda. Satu hal yang dapat Anda lakukan jika Anda memiliki akses ke basis kode sisi server situs web Anda, adalah membuat tindakan pengontrol di sana (dengan asumsi Anda menggunakan MVC) dan kemudian menggunakannya untuk menggunakan layanan jarak jauh. Anda kemudian dapat membuat permintaan AJAX ke tindakan pengontrol Anda. Bonus untuk pendekatan ini adalah Anda dapat menjalankan pemeriksaan tambahan sebelum menghubungi layanan jarak jauh, memformat responsnya, dan bahkan menyimpannya dalam cache.

Baca ini, semuanya.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

saya selalu menemukan referensi ke dokumen MDN itu tidak terlalu membantu. ini adalah dokumen yang panjang dan tidak secara langsung menjawab pertanyaan yang ada. apa yang harus saya lakukan jika saya tidak memiliki akses ke basis kode sisi server dan ingin mengakses API ini?

Solusi saya adalah membuat api saya sendiri di server domain saya untuk mengakses api asing apa pun yang tidak mengizinkan permintaan lintas-Asal, saya menyebutnya api repeater saya.

@JigzPalillo Bisakah Anda membagikan pendekatan atau kodenya? Saya cukup banyak terjebak! :(

Biasanya ini akan berhasil, tetapi jika tidak dan Anda tidak memiliki akses ke domain itu...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

Apa yang saya lakukan adalah membuat repeater di server saya

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

Server perlu merespons dengan header CORS pada panggilan opsi. Jika Anda menggunakan nodejs/express, Anda dapat memperbaikinya untuk semua titik akhir dengan:

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

Tapi itu agak longgar. Mungkin ingin mengencangkan untuk produksi.

Saya sudah lama memecahkan masalah itu. Server milik layanan 3p dan karena itu di luar kendali saya. Saya hanya mem-proxy-nya saja. Semuanya baik-baik saja di depan itu.

Terima kasih

@steveswork sama di sini, server milik layanan 3p, sangat menyedihkan bahwa saya dapat menggunakan ajax, request.js tetapi tidak axios yang saya sukai

@adl1995 apakah kebetulan dapat memperbaiki masalah ini? Saya benar-benar bingung bagaimana menangani kesalahan ini

udah tahun 2018 ada update kah?

@challenger532 Tidak Masih belum.

Kesalahan masih sering terjadi.

Saran saya: gunakan library yang berbeda .

Oke, ini agak memecahkan masalah saya. Anda lihat, saya bekerja dengan vuejs dan Laravel... saya mengatur rute web Laravel saya di php sebagai berikut:

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

kemudian file vuejs saya cukup menggunakan axios untuk mengirim permintaan ke rute saya:

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

dan voila, itu berfungsi dengan baik.

jika menggunakan Laravel, fungsi tambahan:

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

ke pengontrol atau rute sebelum kembali
Contoh:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Maaf untuk bahasa Inggris saya. Semoga ini bisa membantu Anda.

Saya menggunakan vue.js (localhost port 8080 ) dan Flask untuk API saya (localhost port 5000)

Saya hanya perlu membuat sedikit perubahan pada kode api saya (Flask pada port 5000).
Saya menambahkan flask extension flask-CORS dan memodifikasi kode saya untuk menggunakannya.
Sebelum:

from flask import Flask, request
import json
app = Flask(__name__)

Setelah:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

Setelah ini berhasil dan saya bisa menggunakan API saya.
Jadi ini bukan masalah axios, tetapi masalah API dan Anda mendapatkan peringatan dari Firefox bukan dari memanggil fungsi axios.get.

Dengan mengatur opsi header dan proxy, saya malah mendapatkan Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Tapi saya bisa menyiasatinya dengan ekstensi ini: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

Sayangnya, itu baru berhasil kemarin dan tidak hari ini... Aku sudah mencoba mencari tahu kenapa

Permintaan proxy menggunakan server dev Webpack untuk menghindari _cors_ dalam mode pengembangan

Di file webpack.config Anda tambahkan

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

Contoh di atas akan mem-proxy permintaan
axios.post(/api/posts/1 ... . . . .
ke https://my-target.com/posts/1

Contoh Git di atas, Anda perlu mengubah seperti ini dalam permintaan Anda

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

Dalam file webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

proxy konfigurasi webpack yang dimodifikasi akan mengubah permintaan Anda seperti ini..

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

Anda dapat menggunakan banyak jalur di proxy devServer seperti ini
Dalam file webpack.config ........

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

Gunakan jika Anda membutuhkan

    "changeOrigin": true,
    "secure": false

Saya menghabiskan berjam-jam untuk memperbaikinya dan sepertinya tidak ada bantuan di mana-mana. cara sederhana dan cepat adalah dengan menambahkan ekstensi chrome yang disebut Allow-Control-Allow-Origin*. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=id

hanya akan membantu Anda, tetapi bagaimana dengan orang lain?

Entah bagaimana berguna: https://github.com/shalvah/cors-escape

mencoba Vue dan axios saya jelas mendapat masalah yang sama.

Baru saja mencoba solusi yang disediakan oleh sundar6445 dan berfungsi dengan baik.
File konfigurasi webpack yang saya modifikasi ada di/config/index.js. Saya lebih suka memodifikasi yang ini sejak dirujuk dalam/build/webpack.dev.conf.js

Di dalamnya Anda menemukan

module.exports = {
  dev: { 
...
proxyTable: {},

Seperti yang dijelaskan oleh sundar, ubah proxyTable dengan misalnya sesuatu seperti

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

yang berarti bahwa semua yang dimulai oleh /events akan dialihkan ke http://localhost :3000/events. Tidak ada 'pathRewrite' dalam kasus saya, url relatif akan sama.

dan tentu saja, jangan lupa untuk menghapus URL lengkap di komponen Vue Anda. saya punya:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

menjadi:

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

dan itu bekerja dengan sangat baik. Terima kasih kepada @sundar6445

Semoga ini membantu

Saya tahu ini ditandai ditutup, tetapi saya ingin menunjukkan sesuatu. Terkadang kesalahan ini akan muncul di sisi klien jika Kunci API Anda kedaluwarsa atau sedang digunakan oleh orang lain.

Ini mungkin tidak perlu dikatakan tentang pengembang yang lebih berpengalaman tetapi bagi orang-orang yang baru mengenal pengkodean, pastikan Anda memiliki Kunci API yang unik. Tidak semua API memerlukan kunci unik, tetapi jika memang demikian, Anda pasti akan membutuhkannya. Lihat dokumentasi API untuk API spesifik Anda untuk melihat apa yang mereka butuhkan.

Tidak ada opsi sebagai crossDomain di dalam Axios. Harap pelajari kode sumber sebelum memberikan/menggunakan petunjuk yang salah.

Anda tidak dapat menjalankan JavaScript pada klien (tanpa menonaktifkan CORS dan menjadikan Anda target XSS) untuk mengambil informasi dari situs lain.

Ini untuk mencegah Anda mendapatkan akses ke browser klien dan berpotensi menguras rekening bank mereka atau memposting ke beberapa situs tanpa izin mereka. Hal yang sama berlaku untuk situs scraping (yang pada dasarnya adalah apa yang op coba lakukan).

Anda dapat mengikis web (yaitu, mengambil data) menggunakan server dengan modul CORS, dan proxy melalui server itu.

Saya pikir konfigurasi header ini akan menyelesaikan masalah ini.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Terima kasih

Saya tahu ini terdengar klise, tetapi solusi saya untuk masalah ini adalah membuat api khusus untuk menangani panggilan ini.

Masalahnya bukan dengan aksio. Masalahnya adalah dengan server. Saat Anda menyajikan data, Anda harus menambahkan tajuk berikut, sebelum mengirimnya.

Access-Control-Allow-Origin harus disetel ke *

Access-Control-Allow-Header harus disetel ke Origin, X-Requested-With, Content-Type, Accept

Sumber: kesalahan CORS saat melakukan panggilan axios.get

Mengacu pada jawaban ini, saya menambahkan baris-baris itu ke server ekspres backend saya, seperti:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

sumber: CORS di ExpressJS

Dan semuanya berfungsi dengan baik untuk saya, tanpa konfigurasi tambahan pada axios atau di frontend, jadi ini sebenarnya bukan masalah axios tetapi kurangnya konfigurasi header sisi server.

Akhirnya, saya pikir jawaban lain ini

Cara menghindari CORS preflight
Cara menggunakan proxy CORS untuk mengatasi masalah "Tidak Ada Akses-Kontrol-Izinkan-Asal header"
Cara memperbaiki "Access-Control-Allow-Origin header tidak boleh menjadi wildcard" masalah

semoga membantu.

jika Anda ingin mengambil data dari api atau url pihak ketiga yang memiliki masalah dengan header CORS-nya (hilang atau berisi banyak nilai), saya pikir satu-satunya solusi untuk ini adalah menggunakan tautan ini
" https://cors-anywhere.herokuapp.com/ "
Saya menggunakan tautan untuk proyek kecil tetapi untuk proyek besar Anda mungkin ingin membuat api Anda sendiri untuk menangani panggilan dan membuat api Anda dapat menggunakan proyek sumber terbuka https://github.com/Rob--W/cors-anywhere / .

Yang ini akan berfungsi:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Saya mengalami masalah ini beberapa waktu lalu saat membuat 4webm dan 4chan-list-webm

Perlu dicatat bahwa jika Anda membuat plugin browser, Anda tidak perlu bermain dengan header untuk menekan API. Mungkin jika kita memanggil @moot dia akan mengaktifkan CORS :smile:

lintas domain: benar

Saya harus mengaktifkan port '8080' di backend CORS dan kemudian berhasil.

aman

dokumentasi webpack untuk pemahaman yang lebih baik: https://webpack.js.org/configuration/dev-server/#devserver -proxy

Jika Anda menggunakan laravel atau lumen untuk API backend Anda. Dan Anda sudah menggunakan paket barryvdh/laravel-cors. Solusinya adalah mengatur konfigurasi cors.php Anda sebagai header, metode, dan bagian asal seperti ini
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
Semoga itu memecahkan masalah seseorang

Jika Anda melakukannya di safari, tidak perlu waktu lama, Cukup aktifkan menu pengembang dari Preferensi >> Lanjutan, dan pilih "Nonaktifkan Pembatasan Lintas Asal" dari menu pengembangan. Jika Anda ingin lokal saja, maka Anda hanya perlu mengaktifkan menu pengembang, dan pilih "Nonaktifkan pembatasan file lokal" dari menu pengembangan.

dan di Chrome untuk OSX buka Terminal dan jalankan:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir diperlukan di Chrome 49+ di OSX

Untuk menjalankan Linux:

$ google-chrome --disable-web-security
Juga jika Anda mencoba mengakses file lokal untuk tujuan dev seperti AJAX atau JSON, Anda juga dapat menggunakan flag ini.

-–allow-file-access-from-files
Untuk Windows, masuk ke command prompt dan masuk ke folder tempat Chrome.exe berada dan ketik

chrome.exe --disable-web-security
Itu harus menonaktifkan kebijakan Asal yang sama dan memungkinkan Anda mengakses file lokal.

Mencoba semua solusi yang disebutkan di atas. tidak ada yang berhasil.
akhirnya menemukan satu - https://github.com/expressjs/cors
saya harap ini membantu kalian

Masalah utama adalah perbedaan antara permintaan server dan permintaan klien.

Saat Anda membuat permintaan melalui klien (alias sebagian besar waktu, browser), Anda berada di bawah kekuasaan perangkat lunak browser. Standar untuk perangkat lunak browser adalah untuk mencegah segala upaya aktivitas berbahaya yang mungkin atau mungkin tidak berasal dari perangkat lunak Anda sendiri.

Jika Anda membuat permintaan dari server Anda sendiri (alias bukan klien browser), maka yang diberikan adalah bahwa untuk kode yang Anda tulis sendiri, tidak ada seorang pun (tergantung pada pengaturan server Anda) yang dapat mengakses atau mengontrolnya, dan Anda tahu apa jenis permintaan keluar sehingga tidak ada kekhawatiran untuk panggilan jaringan yang terjadi di luar lingkungan Anda atau sepengetahuan Anda.

Itu sebabnya browser sangat ketat tentang permintaan lintas asal, khususnya karena begitu kode publik Anda ada di klien, Anda memiliki lebih sedikit kendali atas siapa yang melihatnya / siapa yang dapat memanipulasinya. Jika aplikasi frontend Anda disusupi dan beberapa perangkat lunak berbahaya dapat melakukan panggilan jaringan dari kode Anda dengan mengorbankan pengunjung/pengguna Anda, mereka ingin memastikan bahwa itu tidak dapat terjadi. Oleh karena itu, mydomain.com Anda tidak dapat melakukan panggilan ke allyourdataarebelongtome.com jika Anda tidak bermaksud demikian.

Solusinya di sini bukan karena permintaan lintas domain tidak berfungsi - itu karena server Anda sendiri yang mencegahnya dan Anda perlu mengakomodasi keadaan ini dalam menerima domain Asal Anda, atau server pihak ketiga yang Anda coba lakukan panggilan API memiliki beberapa metode otentikasi/otorisasi lain di atas permintaan lintas domain itu.

@mddanishyusuf Solusi bekerja untuk saya.

Saya pikir konfigurasi header ini akan menyelesaikan masalah ini.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

Terima kasih

Terima kasih! ;)

Dari sini: https://github.com/axios/axios Saya menyadari bahwa mereka tidak memasukkan url lengkap ke permintaan url axios.

Jadi saya mencoba dan menyelesaikan ini dengan membuat API saya sendiri di situs saya. Saya baru saja mengirim permintaan seperti ini

axios.get('/sample/request')

kemudian http://127.0.0.1 :8080/sample/request akan mengirim permintaan lain ke https://a.4cdn.org/ dan mengembalikan tanggapan ke axios sebagai json.

Ini bekerja untuk saya, semoga dapat membantu Anda

https://github.com/axios/axios/issues/853#issuecomment -408218917 bekerja dengan fetch API dan .NET 4.5 web API.

Seperti yang saya pahami masalahnya adalah permintaan dikirim dari loclahost:3000 ke loclahost:8080 dan browser menolak permintaan seperti CORS. Jadi solusinya adalah membuat proxy dan browser akan menangani permintaan saat permintaan tersebut hilang dari satu server.
Koreksi saya jika saya salah

Solusi saya adalah:
impor proxy dari 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

Saya dengan masalah yang sama dan saya menyelesaikannya dengan menginstal 'cors' di backend saya (Express).

Lari:
npm instal kors

Kemudian atur saja ini:

var cors = require('cors');
app.use(cors());

Terima kasih @fernandoruch , ini berfungsi dengan server nodejs saya

Saya memiliki masalah yang sama dan menyelesaikannya

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

bekerja pada awalnya, tetapi kemudian berhenti dan saya tidak tahu mengapa.

kemudian saya menyadari bahwa saya memindahkan semua kode saya ke file lain jadi saya perlu menggunakan router :

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Hai,

Setiap pembaruan tentang masalah ini, saya menggunakan .net core 2.1 dan axios 0.18.

Terima kasih.

Saya tidak berpikir masalahnya ada di axios, masalahnya ada di server back-end Anda.

Bagi saya, saya memiliki arsitektur dengan Flask di back-end dan menggunakan aksioma di Vue.JS, satu-satunya hal yang harus saya lakukan di server Flask saya adalah:

...
from flask_cors import CORS
...
CORS(app)

Ini seharusnya tidak masuk ke produksi, Anda juga dapat memiliki daftar izin asal silang di tingkat nginx. Saya membaca ini , mungkin bisa membantu.

Sebagai solusi sementara, Anda dapat menggunakan ini: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Saya tidak menemukan sesuatu yang lebih baik untuk saat ini ..

Ide buruk

Saya mengalami masalah ini ketika saya mencoba membuat permintaan axios.get() ke api cuaca Darksky. Ketika saya membaca halaman FAQ Darksky, saya menemukan pertanyaan tentang masalah yang sama persis ini, mereka menjawab dengan mengatakan bahwa mereka menggunakan ini sebagai tindakan keamanan untuk mencegah akses jahat yang tidak diinginkan ke informasi mereka dan menyarankan untuk membuat proxy untuk mengakses database mereka.

Saya membuat perubahan berikut pada file package.json saya (saya menggunakan create-react-app):

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey diberikan kepada saya oleh Darksky untuk mengakses data mereka.

Ini adalah perbaikan yang sangat sederhana dan berhasil untuk saya! Saya menduga bahwa banyak layanan api akan mulai menggunakan ini sebagai tindakan keamanan. Semoga solusi saya dapat membantu orang lain dengan masalah serupa.

Singkatnya: buat proxy.

Terima kasih @fernandoruch . Ini berfungsi untuk saya ketika saya menambahkannya ke app.js dari server node.js saya

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP (JSON with Padding atau JSON-P) digunakan untuk meminta data dari server yang berada di domain yang berbeda dari klien. JSONP memungkinkan berbagi data yang melewati kebijakan asal yang sama.

Saya hanya menggunakan $.get jquery untuk panggilan api eksternal.

jika Anda ingin mengambil data dari api atau url pihak ketiga yang memiliki masalah dengan header CORS-nya (hilang atau berisi banyak nilai), saya pikir satu-satunya solusi untuk ini adalah menggunakan tautan ini
" https://cors-anywhere.herokuapp.com/ "
Saya menggunakan tautan untuk proyek kecil tetapi untuk proyek besar Anda mungkin ingin membuat api Anda sendiri untuk menangani panggilan dan membuat api Anda dapat menggunakan proyek sumber terbuka https://github.com/Rob--W/cors-anywhere / .

Yang ini akan berfungsi:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - Anda adalah berlian mutlak untuk saran ini. Cheers - saya telah mengikuti banyak jalan di web untuk mencari solusi dan Anda adalah yang pertama yang berhasil untuk skenario khusus saya.

Saya baru saja menemukan masalah ini. Saya memiliki {withCredentials: true} (salin dan tempel dari API saya yang lain) agar API pihak ke-3 ini berfungsi, saya hanya menghapus {withCredentials: true}

Solusi ini bekerja untuk saya

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

referensi https://stackoverflow.com/questions/42422494/cross-domain-at-axios

jika Anda ingin mengambil data dari api atau url pihak ketiga yang memiliki masalah dengan header CORS-nya (hilang atau berisi banyak nilai), saya pikir satu-satunya solusi untuk ini adalah menggunakan tautan ini
" https://cors-anywhere.herokuapp.com/ "
Saya menggunakan tautan untuk proyek kecil tetapi untuk proyek besar Anda mungkin ingin membuat api Anda sendiri untuk menangani panggilan dan membuat api Anda dapat menggunakan proyek sumber terbuka https://github.com/Rob--W/cors-anywhere / .

Yang ini akan berfungsi:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Luar biasa berhasil!!!

kami mengalami masalah ini juga saat beralih ke axios
pengaturan kami adalah webpack + devServer (dengan proxy) + axios

masalahnya adalah kami menggunakan url api lengkap kami sebagai baseURL di axios alih-alih hanya '/ api' (proxy melakukan pemetaan melalui atribut target)

Menurut pendapat saya ini mungkin karena kesalahan kita sendiri. Saya mengalami masalah yang sama seperti di atas. 2 hari saya meluangkan waktu untuk mencari masalah ini. ternyata hanya masalah kecil yang saya temukan. alamat url yang saya masukkan tidak sesuai dengan dokumentasi parse. dan sekarang axios berfungsi dengan baik di sudut 7 . saya

Periksa apakah labu atau server lain telah mengaktifkan CORS .
Juga periksa apakah alamat server sudah benar. Saya terjebak hanya karena saya lupa menambahkan port server.
axios.get('http://localhost:5000/jsonshow')
.then(respons => (this.array= respon))

Ubah " localhost:3000 " menjadi " http://localhost :300" berfungsi dengan baik dengan saya (pastikan aktifkan kor di sisi server)

Ubah " localhost:3000 " menjadi " http://localhost :300" berfungsi dengan baik dengan saya (pastikan aktifkan kor di sisi server)

jika Anda menggunakan port 300 dan bukan 3000.

di VueJS Anda dapat membuat keji bernama vue.config.js di root proyek jika tidak ada dan tambahkan sesuatu seperti

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

Maka panggilan Axios akan terlihat seperti

axios.get('/api/say_hello', {})

jika Anda ingin mengambil data dari api atau url pihak ketiga yang memiliki masalah dengan header CORS-nya (hilang atau berisi banyak nilai), saya pikir satu-satunya solusi untuk ini adalah menggunakan tautan ini
" https://cors-anywhere.herokuapp.com/ "
Saya menggunakan tautan untuk proyek kecil tetapi untuk proyek besar Anda mungkin ingin membuat api Anda sendiri untuk menangani panggilan dan membuat api Anda dapat menggunakan proyek sumber terbuka https://github.com/Rob--W/cors-anywhere / .

Yang ini akan berfungsi:

axios.get( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
.kemudian(res => {
console.log(res)
})

Yang ini bekerja untuk saya! Terima kasih!

Coba yang ini :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

jika Anda ingin mengambil data dari api atau url pihak ketiga yang memiliki masalah dengan header CORS-nya (hilang atau berisi banyak nilai), saya pikir satu-satunya solusi untuk ini adalah menggunakan tautan ini
" https://cors-anywhere.herokuapp.com/ "
Saya menggunakan tautan untuk proyek kecil tetapi untuk proyek besar Anda mungkin ingin membuat api Anda sendiri untuk menangani panggilan dan membuat api Anda dapat menggunakan proyek sumber terbuka https://github.com/Rob--W/cors-anywhere / .

Yang ini akan berfungsi:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

Menghemat waktu saya, terima kasih banyak!

@ronnin Sebagai catatan, saya mencoba solusi Anda, tetapi tidak berhasil.

Apa? Betulkah? Bagi saya itu pasti berhasil ...
Untuk metode GET, bekerja seperti pesona!

Berikut adalah contoh yang saya buat menggunakan API publik, berdasarkan komentar @ronnin :
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

udah tahun 2019, ada update kah? 😃

saya menggunakan ekstensi chrome ini untuk mengembangkan aplikasi saya
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Sebagai catatan, saya mencoba solusi Anda, tetapi tidak berhasil.

Pria, yang dalam masalah, tidak begitu mengenal CORS, dan harus membaca artikel @seungha-kim yang disebutkan sebelumnya: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Sebagai ringkasan:

1. sumber daya jarak jauh yang Anda minta, jika tidak pada Host yang sama seperti yang diminta dari (disebut: Asal), harus menyediakan header CORS tambahan bersama dengan sumber daya, alias. Kontrol Akses Izinkan: host (asal), header, metode, dll.
2. meminta oleh browser atau curl dengan header 'Access-Control-Request-Method' , meminta dengan metode 'OPTIONS' akan dicoba terlebih dahulu secara otomatis sebelum metode yang dimaksud: 'GET', 'POST', dll.
   yang berarti penangan sumber daya jarak jauh harus menangani metode 'OPTION' secara khusus. misalnya (nginx):
   ``` asik
   lokasi /the-remote-resource {
   if ($request_method = 'OPTIONS') {
   add_header 'Access-Control-Allow-Origin' $http_origin;
   add_header 'Access-Control-Allow-Headers' 'DNT, Keep-Alive, User-Agent, X-Requested-With, Jika-Dimodifikasi-Sejak, Cache-Control, Content-Type, Otorisasi';
   add_header 'Access-Control-Allow-Methods' 'OPSI, GET, POST, PUT, PATCH, DELETE';
   add_header 'Access-Control-Allow-Credentials' benar;
   add_header 'Access-Control-Max-Age' 1728000; # 20d

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
```

1. seperti yang disebutkan di atas, saya tidak menggunakan nilai * untuk setiap header Access-Control-Allow-*.
   nilai *, memiliki banyak batasan.
   A. nilai * ke Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods tidak dapat bekerja dengan Access-Control-Allow-Credentials=true. jika cookie diperlukan dengan permintaan, Anda memerlukan Access-Control-Allow-Credentials=true
   B. hanya * yang valid, *.google.com adalah INVALID

1. Access-Control-Allow-Headers adalah daftar header permintaan Anda yang mungkin disertai. keberadaan beberapa header yang tidak tercantum di dalamnya akan membuat Anda diblokir. cukup periksa dan pilih header ke Access-Control-Allow-Headers

2. masalahnya sebagian besar bukan di klien (browser, aplikasi klien Anda), tetapi di sumber daya yang diminta server berada.

3. berbicara dengan rekan pengembang sisi server Anda

Semoga bermanfaat

@ronnin : Jika saya mengerti dengan benar dari poin Anda, itu berarti jika permintaan GET saya meminta sumber daya dari beberapa server yang mereka tidak mengaktifkan CORS, pada dasarnya tidak ada yang bisa kita lakukan dari ujung depan kan?

@ronnin : Jika saya mengerti dengan benar dari poin Anda, itu berarti jika permintaan GET saya meminta sumber daya dari beberapa server yang mereka tidak mengaktifkan CORS, pada dasarnya tidak ada yang bisa kita lakukan dari ujung depan kan?

Gunakan aplikasi berikut di bawah ini untuk membuat permintaan Anda berfungsi

Ini bekerja untuk saya meskipun server tidak mengaktifkan CORS

https://cors-anywhere.herokuapp.com/

Penggunaan :

url = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin : Jika saya mengerti dengan benar dari poin Anda, itu berarti jika permintaan GET saya meminta sumber daya dari beberapa server yang mereka tidak mengaktifkan CORS, pada dasarnya tidak ada yang bisa kita lakukan dari ujung depan kan?

jika permintaan GET saya meminta sumber daya dari beberapa server yang tidak mengaktifkan CORS, pada dasarnya tidak ada yang dapat kami lakukan dari ujung depan melalui permintaan XHR (alias permintaan AJAX) secara langsung. Ya!
Ini adalah browser yang mengikuti protokol dan menolak permintaan Anda.
tetapi, Anda bisa mendapatkan sumber daya dengan permintaan browser tradisional, seperti location.href, iframe, form.action

Sebagian besar, kami menyiapkan server proxy terbalik sendiri, (seperti nginx), dengan sisi server yang dikendalikan sendiri untuk menyelesaikan masalah meminta sumber daya ke-3 tanpa mengaktifkan CORS.
Aplikasi Heroku, yang disebutkan @ndjerrou , adalah masalahnya.

kami memiliki mobil self-driving dan AI tetapi masih berjuang dengan CORS

Saya berhasil menyelesaikan ini menggunakan heroku sebagai proxy.

Ini kode saya;

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

sekarang udah 2020, ada update kah? 😃

Dapat mengkonfirmasi, ini 2020 dan masih belum ada pembaruan.
fetch() memiliki mode mode: 'no-cors' , mengapa axios tidak memiliki yang serupa?

Saya mencoba

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

Dan tidak satu pun dari tajuk itu berfungsi. Saya mencoba withCredentials pada status benar dan salah, tidak berhasil.

Dengan mengambil, itu hanya berfungsi.

Apa yang harus saya lakukan jika saya tidak ingin berurusan dengan kebijakan CORS dan masih menggunakan aksio?
Sunting: Plus, mengapa masalah ini ditutup? Kami jelas masih memiliki masalah dengan ini.

Anda perlu mendefinisikan 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' di header respons BUKAN di header permintaan.

Dapat mengkonfirmasi, ini 2020 dan masih belum ada pembaruan.
fetch() memiliki mode mode: 'no-cors' , mengapa axios tidak memiliki yang serupa?

Saya mencoba

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

Dan tidak satu pun dari tajuk itu berfungsi. Saya mencoba withCredentials pada status benar dan salah, tidak berhasil.

Dengan mengambil, itu hanya berfungsi.

Apa yang harus saya lakukan jika saya tidak ingin berurusan dengan kebijakan CORS dan masih menggunakan aksio?
Sunting: Plus, mengapa masalah ini ditutup? Kami jelas masih memiliki masalah dengan ini.

Tidak ada masalah dengan axios, itu sebabnya masalah ditutup. cukup duduk dan baca artikel di MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙, 徒劳无功

Terima kasih teman-teman, itu membantu! Maafkan saya atas ketidaknyamanan ini!

Saya mengalami kesalahan ini pada axios ketika saya menggunakan hotspot seluler perangkat saya. Kemudian ketika saya menggunakan WiFi di kedai kopi saya tidak mendapatkan CORB

Saya mencoba menggunakan API Wikipedia dan memiliki masalah yang sama.
Menambahkan origin=* ke URL memperbaikinya.

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

Saya menyelesaikannya dengan tidak menggunakan aksioma, mencoba GET dari URL eksternal dengan $ajax dan $get, tidak memiliki masalah dengan hal-hal jquery lama. Ini pasti BUG.

sekarang tahun 2021, ada update kah? 😃

Saya mengalami masalah terkait "Access-Control-Allow-Headers" yang serupa ketika mencoba menekan webhook zapier dari axios (0.18.0) dan chrome (75.0.3770.100).

Permintaan saya adalah:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

Saya akan menerima pesan kesalahan tentang tajuk yang tidak didukung:

diblokir oleh kebijakan CORS: Jenis konten bidang tajuk permintaan tidak diizinkan oleh Access-Control-Allow-Headers dalam respons preflight

Setelah membaca halaman ini, pemahaman saya adalah:

• 1. Zapier perlu mengonfigurasi respons server mereka untuk mendukung Access-Control-Request-Headers setidaknya untuk "tipe konten"
• 1. Saya perlu mengonfigurasi permintaan saya untuk mengecualikan pemeriksaan header "tipe konten" selama OPT preflight.

Apakah ada saran untuk mencapai opsi 2? Masalah umum Zapier

Sunting: Saya yakin ini tidak ada hubungannya dengan aksioma, tetapi dukungan yang buruk di pihak Zapier. Permintaan tampaknya berfungsi setelah beralih ke GET dengan params URL.

Nah jika di FAQ mereka menyebutkan tidak memerlukan params tipe konten apa pun Anda
bisa coba ol
Var xhr = new XMLHTTPRequest() dan coba seperti itu tanpa aksioma.

Apakah posting Anda ke webhook di klien atau server?

Pada Tue, Jun 25, 2019, 3:27 Pete Schmitz [email protected] menulis:

Saya mengalami masalah terkait "Access-Control-Allow-Headers" yang serupa
saat mencoba mengenai webhook zapier dari axios (0.18.0) dan chrome
(75.0.3770.100).

Permintaan saya adalah:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

Saya akan menerima pesan kesalahan tentang tajuk yang tidak didukung:

diblokir oleh kebijakan CORS: Jenis konten bidang tajuk permintaan tidak diizinkan
oleh Access-Control-Allow-Headers dalam respons sebelum penerbangan

[gambar: gambar]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

Setelah membaca halaman ini, pemahaman saya adalah:

-
1. Zapier perlu mengonfigurasi respons server mereka untuk mendukung
Access-Control-Request-Header setidaknya untuk "tipe konten"
-
1. Saya perlu mengonfigurasi permintaan saya untuk mengecualikan
pemeriksaan header "tipe konten" selama OPT preflight.

Apakah ada saran untuk mencapai opsi 2? Masalah umum Zapier
tentang Access-Control-Request-Headers
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
menyarankan "jangan sesuaikan tipe konten" dari permintaan Anda. Namun, saya
tidak memiliki opsi tajuk apa pun dalam permintaan saya, atau tajuk default apa pun
dikonfigurasi ke axios, jadi saya hanya bisa berasumsi ini tersirat di ujung axios?

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
Https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBWjkment56XG43VMVBWJK3LN5PAWZH2DYLN5PAWZH2RYLN5PAWZH
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

Ada berita tentang ini? Aku cukup banyak di perahu yang sama.

@imranimu Masalahnya adalah kombinasi dari browser yang Anda gunakan dan server yang Anda minta. Tidak ada yang bisa dilakukan oleh aksio, kecuali browser mengekspos API yang membiarkannya mengabaikan pemeriksaan CORS.

Anda punya beberapa pilihan:

Jika Anda mengontrol server yang Anda minta, izinkan server tersebut merespons semua permintaan OPTIONS dengan header berikut:

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

Dengan express ini mungkin terlihat seperti ini, ditempatkan sebelum rute lain di rantai middleware Anda:

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

Anda juga harus menambahkan header Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> ke respons.

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

Sederhananya, browser tahu kapan Anda meminta sumber daya pada Origin (domain) yang berbeda, sehingga ia mengirimkan pemeriksaan preflight (menggunakan jenis metode permintaan OPTIONS, bukan GET, POST dll), untuk melihat apakah server mengatakan tidak apa-apa untuk menerima permintaan. Ini adalah ukuran keamanan browser dasar untuk mengurangi kemungkinan situs web pihak ketiga menggunakan API Anda - yang mungkin tidak Anda inginkan. Kode di atas pada dasarnya hanya mengatakan bahwa boleh saja situs web tertentu menggunakan API. Jika dapat digunakan oleh semua situs web, Anda akan menetapkan Access-Control-Origin: * .

Atau, jika Anda tidak mengontrol server tempat Anda membuat permintaan, maka buka rute di server yang melayani halaman, yang membuat (proksi) permintaan untuk Anda. Ini berfungsi karena rute yang diekspos memiliki Asal (domain) yang sama dengan aplikasi Anda, sehingga kebijakan CORS tidak diterapkan, dan server yang Anda buka rutenya bukan browser, jadi tidak akan menerima kesalahan CORS.

@Aitchy13 server API yang saya sambungkan memiliki Access-Control-Origin: * , konsol memberi saya kesalahan ini seperti dalam masalah ini,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

Anda juga mengatakan, untuk menambahkan ...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... tetapi bukankah Access-Control-Allow-Origin hanya untuk tanggapan bukan permintaan?

Tidak didukung jika Access-Control-Allow-Origin : * ... sangat aneh.

Berikut beberapa header respons API untuk beberapa referensi guna membantu membantu solusi yang mungkin di masa mendatang:

( Ini bukan permintaan metode OPTIONS sebelum permintaan aktual yang ditolak karena CORS )
KEPALA TANGGAPAN

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

Atau apakah saya memiliki sesuatu yang salah? Hampir mematahkan laptop saya menjadi dua karena masalah ini.

Saya memiliki masalah yang sama, setelah beberapa kali mencoba, menguji beberapa solusi, tidak ada yang berhasil. hanya setelah mengatur proxy di package.json.
menambahkan:
"proxy": "alamat api"
bahwa itu akan melewati kor.

@IkarosFeitosa Bisakah Anda memposting konfigurasi proxy konfigurasi Anda?

@zacharytyhacz Anda tidak dapat mengirim kredensial browser saat server merespons dengan Access-Control-Allow-Origin: * .

Salah satu:

1. ubah * menjadi alamat situs web tertentu.
2. set ...withCredentials: false dalam parameter config/options dari fungsi permintaan axios yang Anda gunakan.
3. atur properti proxy di parameter config/options dari fungsi permintaan axios yang Anda gunakan, ke proxy yang valid (contoh di bawah)

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

Adakah peningkatan? Saya mengonfigurasi server web saya untuk mengatur header resposne, tetapi sepertinya tidak berfungsi.

Saya bingung tip kesalahan ini:

CORS harus membatasi browser web, perlu izin pengembalian server, saya sudah mengizinkan cors ini, tetapi kemudian browser memberi tahu saya No 'Access-Control-Allow-Origin' header is present on the requested resource .

Saya mencoba konfigurasi cors server saya dengan fetch api, itu berfungsi dengan baik.

Jika Anda menggunakan nodejs dengan express . Posting itu mungkin bisa membantu Anda.

Jika Anda hanya ingin beberapa jalur dengan kor yang diizinkan misalnya:
/home/fridge - tidak diperbolehkan dari asal lain
/home/toilet - harus diizinkan dari asal lain

Anda dapat mencoba implementasi berikut (berfungsi untuk saya)

Di route/home.js

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

Jika Anda tidak menggunakan nodejs dengan express - coba googling untuk permintaan metode OPTIONS

Diuji dari ekspres: 4.16.3

Tidak, :) Ini adalah masalah saat mengembangkan (kami menggunakan http)
ketika Kami rilis di server (kami menggunakan https)
Itu tidak terjadi.
Jadi cukup instal add on: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=id

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

Itu memecahkan hidupku!!

Terima kasih atas sarannya. Saya telah memperbarui kode saya untuk merutekan permintaan melalui proxy:

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

Namun, saya masih mendapatkan kesalahan ini:

Permintaan Lintas Asal Diblokir: Kebijakan Asal yang Sama melarang membaca sumber daya jarak jauh di https://a.4cdn.org/a/threads.json. (Alasan: tajuk CORS 'Access-Control-Allow-Origin' tidak cocok dengan ' https://boards.4chan.org ').

Saya telah mencari melalui berbagai forum dan pertanyaan tentang Stack Overflow dan sepertinya saya tidak dapat menemukan solusi untuk ini. Akan sangat dihargai jika seseorang dapat memberikan beberapa wawasan.

Halo teman-teman, coba ini sebelum panggilan axios, ini berhasil untuk saya

headers.set('Content-Type', 'application/json')

ini adalah solusi saya

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

Saya akan membuat video tentang cara memperbaiki masalah CORS ini. Saya akan memperbarui komentar ini dengan tautan ke video YouTube saya.

Sunting:
https://youtu.be/hxyp_LkKDdk

sekarang tahun 2021, ada update kah? 😃

Ya, saya sangat menyukai omong kosong saya, saya benar-benar harus memeriksa tahun itu omong kosong

Cukup gunakan fetch untuk menguji apakah kor server berfungsi terlebih dahulu.

Dan...

axios dapat meminta koa-server , tetapi tidak iris secara langsung, keduanya merupakan perangkat cors-middleware yang populer.

1358

Mengapa tidak ada solusi resmi untuk masalah ini? Saya membaca seluruh utas ini dan bingung dengan apa yang tampak seperti masalah universal yang tidak ada yang benar-benar menyelesaikannya dengan cara standar apa pun.

Mengapa tidak ada solusi resmi untuk masalah ini? Saya membaca seluruh utas ini dan bingung dengan apa yang tampak seperti masalah universal yang tidak ada yang benar-benar menyelesaikannya dengan cara standar apa pun.

Seluruh masalah CORS bukanlah Axios, atau bahkan JavaScript itu sendiri. Ini adalah fitur keamanan yang ada di sebagian besar atau semua browser. Ada cara untuk 'meretas' di sekitarnya, tetapi terserah server untuk merespons dengan tajuk yang benar.

Mengapa tidak ada solusi resmi untuk masalah ini? Saya membaca seluruh utas ini dan bingung dengan apa yang tampak seperti masalah universal yang tidak ada yang benar-benar menyelesaikannya dengan cara standar apa pun.

Seluruh masalah CORS bukanlah Axios, atau bahkan JavaScript itu sendiri. Ini adalah fitur keamanan yang ada di sebagian besar atau semua browser. Ada cara untuk 'meretas' di sekitarnya, tetapi terserah server untuk merespons dengan tajuk yang benar.

Jadi dengan tanggapan itu, apa cara yang paling "berhasil" untuk menerapkan perbaikan untuk masalah CORS?

Ok, setelah dua hari penelitian akhirnya saya mendapatkannya.

Berbicara secara tegas, ini bukan masalah aksio. Sebenarnya ini bahkan tidak boleh dianggap sebagai masalah. axios dirancang untuk bekerja mengikuti semua standar CORS yang aneh dan mengganggu itu, jadi pesannya: CORS header ‘Access-Control-Allow-Origin’ missing diharapkan terjadi, itu adalah kerja axios yang benar. Dalam contoh dengan 4chan api, seperti yang dikatakan sebelumnya, masalahnya bukan pada aksios, adalah api 4chan itu sendiri yang tidak mengikuti standar CORS.

Beberapa orang telah menyarankan trik lama menggunakan proxy untuk menangani7menghindari semua validasi header itu. Berikut adalah blog dari Negar Jamalifard yang menjelaskan cara melakukan triknya: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 By the way , Saya tidak yakin apakah ini dapat dianggap sebagai praktik yang buruk.

Dalam kasus saya, saya dua hari mencoba untuk terhubung ke asp net core api di localhost saya sendiri sampai saya menyadari aksioma, sebelum mengirim permintaan get saya, secara otomatis mengirim "permintaan preflight" yang dikirim sebagai metode OPSI yang server saya tidak siap untuk menangani. Jika ada yang menyalahkan chrome dan firefox untuk menampilkan pesan jadi ambigu.

Beberapa orang telah menyarankan trik lama menggunakan proxy untuk menangani7menghindari semua validasi header itu. Berikut adalah blog dari Negar Jamalifard yang menjelaskan cara melakukan triknya: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 By the way , Saya tidak yakin apakah ini dapat dianggap sebagai praktik yang buruk.

Jadi hanya proxy yang merupakan kasus terbaik untuk panggilan ini? Itu memalukan.

Jadi hanya proxy yang merupakan kasus terbaik untuk panggilan ini? Itu memalukan.

Anda juga dapat mencoba berbicara dengan orang yang membuat api yang Anda coba konsumsi dan meminta mereka untuk memperbaikinya.

Saya telah memecahkan masalah:
untuk aksio: url= " http://localhost :8080" method='post'
untuk tanggapan Server Django saya:
uesrItem = {'pengguna': 'xxx'}
respon = JsonResponse(userItem)
response["Access-Control-Allow-Origin"] = " http://localhost :8080"
response["Access-Control-Allow-Credentials"] = 'benar'
response["Access-Control-Allow-Methods"] = "POST, OPSI"

Masalahnya bukan aksio, tetapi API yang Anda minta!

Misalnya saya diberi kode API di Flask dan metode GET adalah:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

Tetapi masalahnya terpecahkan ketika saya menambahkan tajuk dalam respons API:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

Kemudian saya mencatat respons axios saya dan saya mendapatkannya:

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

Saya tidak tahu API apa yang Anda semua gunakan tetapi di Flask Itu terpecahkan!

Dalam kasus saya tidak ada yang salah dengan axios. Saya baru saja meminta orang yang membuat API untuk mengaktifkan sisi server CORS.

coba ini

delete axios.defaults.headers.common["X-Requested-With"];

Saya telah menggunakan solusi https://github.com/Rob--W/cors-anywhere dan berfungsi dengan baik, tetapi dalam prod saya akan meminta orang yang membuat api untuk mengaktifkan kor untuk domain saya

Saya tidak berpikir Anda dapat menyelesaikan CORS secara langsung di axios, karena CORS adalah batasan browser yang berada di antara browser Anda dan server target.

Anda dapat:

1. Sertakan Access-Control-Allow-Origin di header respons Anda dari server target Anda .
2. Jangan sertakan nama host dalam permintaan axios Anda sehingga akan meminta server asli Anda . Kemudian dari server asli Anda, Anda dapat melakukan apa pun yang Anda inginkan ke server target.

Sebutkan contoh cuplikan kode yang mendetail.
Ini akan dia membantu.

Saya mengalami masalah yang sama di lokal saya.
Saya menambahkan kor di backend saya dan menyelesaikannya. :)

Ini bukan masalah dengan axios Ini adalah masalah dengan backend. Saya menggunakan Django. Dan menambahkan keduanya akan menyelesaikan masalah.

Tambahkan Pakaian Tengah CORS

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

Dan memungkinkan CORS.
(Mengizinkan CORS untuk semua)

CORS_ORIGIN_ALLOW_ALL = True

(Ini agak tidak aman karena memungkinkan semua asal. Yang akan membuatnya rentan terhadap serangan CSRF)
Oleh karena itu untuk produksi hanya memungkinkan untuk asal-usul tertentu

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

Contoh :+1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Halo semua,
Seperti yang telah disebutkan, masalah ini adalah perlindungan browser terhadap permintaan lintas-asal. Saya menyelesaikannya dengan mengikuti petunjuk berikut: https://support.google.com/chrome/thread/11089651?hl=id

Bagi yang masih berjuang:
Semoga sekarang Anda mengerti bahwa ini bukan masalah dengan Axios dan browser memblokir CORS karena header tidak disetel oleh server. Jika Anda memahami hal ini dan masih mengalami masalah dengan server Anda sendiri yang tidak menyetel header, pastikan untuk menyetelnya di server web Anda yang sebenarnya saat menggunakan proxy terbalik. Misalnya, banyak aplikasi Node/Express dilayani oleh NGINX dalam produksi dengan proxy terbalik. Lihat enable-cors.org untuk cara mengaturnya di NGINX.

Bagi yang masih berjuang:
Semoga sekarang Anda mengerti bahwa ini bukan masalah dengan Axios dan browser memblokir CORS karena header tidak disetel oleh server. Jika Anda memahami hal ini dan masih mengalami masalah dengan server Anda sendiri yang tidak menyetel header, pastikan untuk menyetelnya di server web Anda yang sebenarnya saat menggunakan proxy terbalik. Misalnya, banyak aplikasi Node/Express dilayani oleh NGINX dalam produksi dengan proxy terbalik. Lihat enable-cors.org untuk cara mengaturnya di NGINX.

Saya telah berjuang 3 jam, tidak ada perubahan di sisi klien, akhirnya saya menambahkan hal-hal berikut di server:

pasang egg-cors (hanya untuk proyek telur)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

itu saja

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

Cukup gunakan fetch untuk menguji apakah kor server berfungsi terlebih dahulu.

Dan...

axios dapat meminta koa-server , tetapi tidak iris secara langsung, keduanya merupakan perangkat cors-middleware yang populer.

1358

Ini berhasil untuk saya dan perlu mempelajari alasannya

Saya Bekerja dengan Tornado dan Vuejs, axios bukan masalahnya, di backend saya ditambahkan:

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
Ini Berhasil
Terima kasih verrrrrrrrr

Saya mengalami masalah yang sama
Kode saya
aksio({
metode: "dapatkan",
url: "http://localhost:4000/users",
})
.kemudian(tanggapan => {
console.log(tanggapan);
})
.catch(Kesalahan => {
console.log(Kesalahan)
});
}
Mendapatkan kesalahan ini
Akses ke XMLHttpRequest di ' http://localhost :4000/users' from origin ' http://localhost :3000' telah diblokir oleh kebijakan CORS: Respons terhadap permintaan preflight tidak lulus pemeriksaan kontrol akses: Tidak ada 'Access-Control Header -Allow-Origin' hadir pada sumber daya yang diminta.

Adakah yang bisa memberi saya solusi langkah demi langkah untuk apa yang harus saya lakukan?

@albertpinto Pertama-tama Anda harus memahami bahwa axios bukanlah masalahnya, "backend" yang Anda gunakan harus dapat menerima data eksternal. jadi di google Anda dapat mencari. sesuatu seperti _enable cors on (letakkan bahasa atau kerangka kerja yang Anda gunakan)_

@albertpinto lihat semua solusi yang mungkin di utas mega ini. Ini bukan masalah sisi klien/front-end di pihak Anda - ini sebenarnya adalah server (localhost:4000). Server perlu merespons dengan header CORS untuk mengizinkan asal.

Misalnya, server Anda harus membalas dengan tajuk seperti:

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

Saya memecahkan ini dengan yang berikut:

1. Instal cors npm : npm install cors (di server node istirahat Anda dalam kasus saya http://localhost:4000)

Ini juga berlaku pada titik akhir Anda:
var cors = membutuhkan('cors')
var ekspres = membutuhkan('ekspres')
var cors = membutuhkan('cors')
aplikasi var = ekspres()
app.use(cors())

Terima kasih untuk semua saran!

// Untuk CORS, jika Anda menggunakan js ekspres, Anda cukup menggunakan paket cors melalui npm.

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURL tidak menerapkan aturan CORS. Aturan tersebut diberlakukan oleh browser untuk tujuan keamanan.

Ketika Anda menyebutkan bahwa Anda menambahkan tajuk yang relevan, saya menganggap maksud Anda Anda menambahkan tajuk itu ke permintaan. Sebenarnya, tajuk diharapkan dalam tajuk respons dari server, yang menunjukkan bahwa sumber daya diizinkan untuk diakses oleh situs web lain secara langsung.

FYI, CORS - Berbagi Sumber Daya Lintas Asal. Karena API Anda tidak mendukungnya, Anda memiliki dua opsi -

1. Gunakan server proxy di domain yang sama dengan halaman web Anda untuk mengakses API 4chan atau,
2. Gunakan server proxy di domain lain mana pun, tetapi ubah respons untuk menyertakan header yang diperlukan.

Saya ingin memilih untuk menutup masalah ini sebagai "Bukan masalah".

@sunnykgupta
logika yang sama, badan yang sama, tetapi permintaan posting http sudut ke titik akhir backend jarak jauh tidak menerima kesalahan blok CORS

Jika Anda menjalankan server Go, sarankan Anda menggunakan Gorilla

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

Saya memecahkan ini dengan yang berikut:

1.buat file vue.config.js di root proyek tepat di samping package.json, yang berisi:

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2.buat permintaan http seperti ini:

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get('https://a.4cdn.org/a/threads.json', {
header: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
proxy: {
tuan rumah: '104.236.174.88',
pelabuhan: 3128
}
}).lalu(fungsi (respon){
console.log('respon adalah : ' + response.data);
}).catch(fungsi (kesalahan) {
if (error.respon) {
console.log(error.response.headers);
}
else if (error.request) {
console.log(kesalahan.permintaan);
}
lain {
console.log(kesalahan.pesan);
}
console.log(error.config);
});

Halo semuanya,
Saya hanya memposting ini karena butuh berjam-jam bagi saya untuk menyelesaikannya.

Pertama-tama, CORS jelas merupakan masalah sisi server dan bukan sisi klien, tetapi saya lebih dari yakin bahwa kode server benar dalam kasus saya karena aplikasi lain bekerja menggunakan server yang sama di domain yang berbeda. Masalahnya dimulai ketika saya mulai menggunakan axios dengan instance kustom saya.

Dalam kasus saya, itu adalah masalah yang sangat spesifik ketika kami menggunakan baseURL dalam instance axios dan kemudian mencoba melakukan panggilan GET atau POST dari mana saja, axios menambahkan garis miring / antara baseURL dan URL permintaan. Ini masuk akal juga, tapi itu adalah masalah tersembunyi. Server Laravel saya dialihkan untuk menghapus garis miring yang menyebabkan masalah ini.

Secara umum, permintaan OPTIONS pra-penerbangan tidak menyukai pengalihan. Jadi, pastikan untuk memeriksanya dan menghindarinya.

Saya harap ini dapat membantu seseorang meskipun tidak ada yang bug.