cURL не применяет правила CORS. Эти правила применяются браузерами в целях безопасности.

Когда вы упоминаете, что добавили соответствующий заголовок, я предполагаю, что вы имеете в виду, что добавили эти заголовки в запрос. Фактически, заголовок ожидается в заголовках ответа от сервера, указывая, что к ресурсу разрешен прямой доступ другим веб-сайтам.

К вашему сведению, CORS - совместное использование ресурсов между источниками. Поскольку ваш API не поддерживает его, у вас есть два варианта:

1. Используйте прокси-сервер в том же домене, что и ваша веб-страница, для доступа к API 4chan или,
2. Используйте прокси-сервер в любом другом домене, но измените ответ, включив в него необходимые заголовки.

Я хочу проголосовать за то, чтобы закрыть этот вопрос как «Не проблема».

Спасибо за предложение. Я обновил свой код, чтобы направить запрос через прокси:

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

Однако я все еще получаю эту ошибку:

Запрос на кросс-источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://a.4cdn.org/a/threads.json. (Причина: заголовок CORS «Access-Control-Allow-Origin» не соответствует «https://boards.4chan.org»).

Я просмотрел различные форумы и вопросы о переполнении стека, и я не могу найти никакого решения для этого. Был бы признателен, если бы кто-нибудь мог дать некоторое представление.

Есть новости по этому поводу? Я почти в одной лодке ...

Запрос на кросс-источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://a.4cdn.org/a/threads.json. (Причина: заголовок CORS «Access-Control-Allow-Origin» не соответствует «https://boards.4chan.org»).

Это связано с тем, что https://a.4cdn.org и https://boards.4chan.org считаются разными доменами. Разница в а и досках

У меня такая же проблема. Может ли кто-нибудь помочь мне в этом

саааааме

В качестве временного решения вы можете использовать это: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Ничего лучшего пока не нашел ..

@PetitBateau Я не уверен, как расширение Chrome поможет отправлять запросы через axios.

@ adl1995 Это

Расширение Chrome помогает только тем, у кого оно есть. Зависимость от расширения Chrome в производственной среде - не лучшая идея, поскольку не у всех есть это расширение.

Вот почему я сказал, что это временное решение. И, конечно же, для среды разработки.

Access-Control-Allow-Origin - это заголовок ответа, а не заголовок запроса:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get (url, {headers: {'Access-Control-Allow-Origin': *}}) ничего не значит!

пытаться
axios.get (url, {crossdomain: true})

@ronnin Для записи, я попробовал ваше решение, но оно не работает.

Удаленная служба, к которой вы отправляете свой запрос AJAX, не принимает запросы AJAX с перекрестным источником из вашего домена. Одна вещь, которую вы могли бы сделать, если у вас есть доступ к серверной кодовой базе вашего веб-сайта, - это создать там действие контроллера (при условии, что вы используете MVC), а затем использовать его для использования удаленной службы. Затем вы можете делать запросы AJAX к действию вашего контроллера. Бонусом этого подхода является то, что вы можете запускать дополнительные проверки, прежде чем связываться с удаленной службой, форматируя ее ответ и даже кешируя его.

Прочтите это всем.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Я всегда нахожу ссылку на этот документ MDN не очень полезной. Это длинный документ, и в нем нет прямого ответа на поставленный вопрос. что мне делать, если у меня нет доступа к базе кода на стороне сервера и я хочу получить доступ к этому API?

Мое решение - создать свой собственный api на моем доменном сервере для доступа к любому внешнему API, который не разрешает запросы из разных источников, я называю это своим api ретранслятора.

@JigzPalillo Можете поделиться подходом или кодом? Я в значительной степени застрял! :(

Обычно это сработает, но в том случае, если это не так и у вас нет доступа к этому домену ...

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

Я создал ретранслятор на своем сервере.

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

Сервер должен ответить заголовками CORS на вызов опций. Если вы используете nodejs / express, вы можете исправить это для всех конечных точек с помощью:

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

Но это немного не так. Наверное, захочется подтянуться на продакшн.

Но я давно решил эту проблему. Сервер принадлежит сервису 3p и, следовательно, вне моего контроля. Вместо этого я просто проксировал его. На этом фронте все хорошо.

Спасибо

@steveswork здесь то же самое, сервер принадлежит сервису 3p, довольно грустно, что я могу использовать ajax, request.js, но не axios, которые я предпочитаю 👎

@ adl1995 все еще может решить эту проблему? Я совершенно не понимаю, как справиться с этой ошибкой

Сейчас 2018 год, есть ли обновления?

@ challenger532 Нет, все еще нет.

Ошибка по-прежнему распространена.

Мой совет: используйте другую библиотеку .

Хорошо, это вроде решило мою проблему. Видите ли, я работаю с vuejs и Laravel ... я настроил свой веб-маршрут Laravel на php следующим образом:

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

затем файл vuejs, я просто использовал axios для отправки запроса на свой маршрут:

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

и вуаля, все работает нормально.

если вы используете Laravel, функция сложения:

заголовок ('Access-Control-Allow-Origin: *');

к контроллеру или по маршруту перед возвращением
Пример:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
Извините за мой английский. Надеюсь, это поможет тебе.

Я использую vue.js (порт localhost 8080) и Flask для своего API (порт localhost 5000)

Мне просто пришлось внести небольшие изменения в свой код api (Flask на порту 5000).
Я добавил расширение flask-CORS и изменил свой код, чтобы использовать его.
До:

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

После:

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

После этого все заработало, и я смог использовать свой API.
Так что на самом деле это не проблема axios, а проблема API, и вы получаете предупреждение от Firefox не из-за вызова функции axios.get.

Установив параметры заголовков и прокси, я получил вместо них Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. .

Но мне удалось обойти это с помощью этого расширения: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

К сожалению, это сработало только вчера, а не сегодня ... Я пытался понять, черт возьми, почему

Запросы прокси с использованием сервера Webpack dev, чтобы избежать _cors_ в режиме разработки

В вашем файле webpack.config добавьте

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

В приведенном выше примере запрос будет проксироваться
axios.post(/api/posts/1 ... . . . .
в https://my-target.com/posts/1

В приведенном выше примере Git вам нужно изменить это в своем запросе

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

В файле webpack.config ........

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

модифицированный прокси-сервер конфигурации webpack изменит ваш запрос следующим образом ..

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

вы можете использовать несколько путей в прокси-сервере devServer, например
В файле 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
    }
  }
}

Используйте, если вам нужно

    "changeOrigin": true,
    "secure": false

Я потратил часы, чтобы исправить это, и, похоже, не везде помогает. простой и быстрый способ - добавить расширение Chrome под названием Allow-Control-Allow-Origin *. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

поможет только вам, а как насчет других людей?

Как-то полезно: https://github.com/shalvah/cors-escape

пробуя Vue и axios, у меня явно такая же проблема.

Просто попробовал решение, предоставленное sundar6445, и оно отлично работает.
Измененный мной файл конфигурации webpack находится в/config/index.js. Я предпочел изменить этот, поскольку упоминается в/build/webpack.dev.conf.js

В нем ты находишь

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

Как описано sundar, измените proxyTable, например, на что-то вроде

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

это означает, что все, что начинается с / events, будет перенаправлено на http: // localhost : 3000 / events. В моем случае нет pathRewrite, относительный URL будет таким же.

и, конечно же, не забудьте удалить полный URL-адрес в вашем компоненте Vue. Я имел:

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

это становится:

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

и он отлично работает. Спасибо @ sundar6445

Надеюсь это поможет

Я знаю, что это помечено как закрытое, но я хотел кое-что указать. Иногда эта ошибка появляется на стороне клиента, если срок действия вашего ключа API истек или используется кем-то другим.

Это может быть само собой разумеющимся для более опытных разработчиков, но для тех, кто плохо знаком с программированием, убедитесь, что у вас есть уникальный ключ API. Не для всех API-интерфейсов требуются уникальные ключи, но если они есть, они вам обязательно понадобятся. Обратитесь к документации API для вашего конкретного API, чтобы узнать, что им требуется.

Внутри Axios нет варианта crossDomain . Пожалуйста, изучите исходный код, прежде чем давать / использовать неправильные подсказки.

Вы не можете выполнить JavaScript на клиенте (не отключив CORS и не сделав вас целью для XSS) для получения информации с другого сайта.

Это сделано для того, чтобы вы не могли получить доступ к браузеру клиента и потенциально опустошить его банковские счета или публиковать сообщения на каком-либо сайте без их разрешений. То же самое касается парсинга сайтов (что, по сути, и пытается сделать оператор).

Вы можете очищать Интернет (т. Е. Получать данные) с помощью сервера с модулем CORS и прокси через этот сервер.

Думаю, этот конфиг заголовка решит эту проблему.

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

Спасибо

Я знаю, что это звучит банально, но моим решением этой проблемы было создание пользовательского API для обработки этих вызовов.

Проблема не в аксиомах. Проблема в сервере. Когда вы обслуживаете данные, вы должны добавить следующие заголовки перед их отправкой.

Для Access-Control-Allow-Origin должно быть установлено значение *.

Для Access-Control-Allow-Headers необходимо установить значение Origin, X-Requested-With, Content-Type, Accept.

Источник: ошибка CORS при вызове axios.get

Ссылаясь на этот ответ, я добавил эти строки на свой внутренний экспресс-сервер, например:

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

источник: CORS на ExpressJS

И у меня все работает нормально, без какой-либо дополнительной настройки на axios или во внешнем интерфейсе, так что это действительно не проблема axios, а отсутствие конфигурации заголовка на стороне сервера.

Наконец, я думаю, что этот другой ответ на stackoverflow довольно хорошо охватывает тему:

Как избежать предварительной проверки CORS
Как использовать прокси-сервер CORS, чтобы обойти проблемы «Нет заголовка Access-Control-Allow-Origin»
Как исправить проблемы «Заголовок Access-Control-Allow-Origin не должен быть подстановочным знаком»

Надеюсь, это поможет.

если вы хотите получить данные из стороннего API или URL-адреса, у которого есть проблема с его заголовком CORS (отсутствует или содержит несколько значений), я думаю, что единственное решение для этого - использовать эту ссылку
" https://cors-anywhere.herokuapp.com/ "
Я использую ссылку для небольших проектов, но для больших проектов вы можете создать свой собственный api для обработки вызовов и создания api, вы можете использовать проект с открытым исходным кодом https://github.com/Rob--W/cors-anywhere / .

Этот будет работать:

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

Я столкнулся с этой проблемой некоторое время назад при создании 4webm и 4chan-list-webm

Стоит отметить, что если вы создаете плагин для браузера, вам не нужно играть с заголовками, чтобы попасть в API. Может, если мы вызовем @moot, он включит CORS: smile:

crossdomain: true

Мне пришлось включить порт 8080 на бэкэнде CORS, и он сработал.

безопасный

документация по webpack для лучшего понимания: https://webpack.js.org/configuration/dev-server/#devserver -proxy

Если вы используете laravel или lumen для своего внутреннего API. И вы уже используете пакет barryvdh / laravel-cors. Решение состоит в том, чтобы установить конфигурацию cors.php в качестве заголовка, метода и источника, как это
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
Надеюсь, это решит чью-то проблему

Если вы делаете это в сафари, это не займет много времени, просто включите меню разработчика в разделе «Настройки» >> «Дополнительно» и выберите «Отключить ограничения для разных источников» в меню разработки. Если вы хотите только локальный, вам нужно только включить меню разработчика и выбрать «Отключить локальные ограничения файлов» в меню разработки.

а в Chrome для OSX откройте Терминал и запустите:

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

--user-data-dir требуется в Chrome 49+ на OSX

Для запуска Linux:

$ google-chrome --disable-web-security
Также, если вы пытаетесь получить доступ к локальным файлам для целей разработки, таких как AJAX или JSON, вы также можете использовать этот флаг.

-–allow-file-access-from-files
Для Windows войдите в командную строку, перейдите в папку, где находится Chrome.exe, и введите

chrome.exe --disable-web-security
Это должно отключить ту же политику происхождения и позволить вам получить доступ к локальным файлам.

Пробовал все решения, упомянутые выше. ничего не работает.
наконец нашел - https://github.com/expressjs/cors
Надеюсь, это поможет вам, ребята

Основная проблема - это разница между запросами к серверу и запросами клиентов.

Когда вы делаете запросы через клиента (в большинстве случаев через браузер), вы зависите от программного обеспечения браузера. Стандарт для программного обеспечения браузера - предотвращение любых попыток злонамеренных действий, которые могут исходить или не исходить от вашего собственного программного обеспечения.

Если вы делаете запрос со своего собственного сервера (он же не клиент браузера), то для кода, который вы написали сами, никто (в зависимости от настроек вашего сервера) не может получить к нему доступ или контролировать его, и вы знаете, что типы запросов являются исходящими, поэтому нет проблем с сетевыми вызовами, происходящими за пределами вашей среды или ваших знаний.

Вот почему браузеры строго относятся к запросам с перекрестным происхождением, особенно потому, что, когда ваш публичный код находится на клиенте, у вас меньше контроля над тем, кто его видит / кто может им манипулировать. В случае, если ваше интерфейсное приложение скомпрометировано и какое-то вредоносное программное обеспечение может выполнять сетевые вызовы вашего кода за счет ваших посетителей / пользователей, они хотят убедиться, что этого не произойдет. Следовательно, ваш mydomain.com не может звонить на allyourdataarebelongtome.com на тот случай, если вы не хотели, чтобы это произошло.

Решение здесь не в том, что междоменные запросы не работают, а в том, что либо ваш собственный сервер предотвращает это, и вам необходимо учесть это обстоятельство при принятии вашего исходного домена, либо сторонний сервер, на который вы пытаетесь выполнять вызовы API имеет другой метод аутентификации / авторизации поверх этого междоменного запроса.

@mddanishyusuf Решение сработало для меня.

Думаю, этот конфиг заголовка решит эту проблему.

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

Спасибо

Спасибо! ;)

Отсюда: https://github.com/axios/axios Я понял, что они не помещают полный URL-адрес в запрос URL-адреса axios.

Поэтому я пытаюсь решить эту проблему, создав собственный API на своем сайте. Я только что отправил такой запрос

axios.get('/sample/request')

тогда http://127.0.0.1 : 8080 / sample / request отправит другой запрос на https://a.4cdn.org/ и вернет ответы на axios как json.

Это работает для меня, надеюсь, это поможет вам

https://github.com/axios/axios/issues/853#issuecomment -408218917 работал с fetch API и веб-API .NET 4.5.

Насколько я понимаю, проблема в том, что запрос отправляется с loclahost: 3000 на loclahost: 8080, а браузер отклоняет такие запросы, как CORS. Таким образом, решение заключалось в создании прокси-сервера, и браузер будет обрабатывать запросы по мере их поступления с одного сервера.
Поправьте меня если я ошибаюсь

Мое решение было:
импортировать прокси из http-proxy-middleware
app.use ('/ api / **', прокси ({target: "http: // localhost: 8080"}));

У меня была та же проблема, и я решил ее, установив «корс» в моем бэкэнде (Express).

Запустить:
npm установить корс

Тогда просто установите это:

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

Спасибо @fernandoruch , это работает с моим сервером nodejs

У меня была такая же проблема, и я решил ее

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

сначала работал, но потом остановился, и я не мог понять, почему.

затем я понял, что переместил весь свой код в другой файл, поэтому мне нужно использовать маршрутизатор:

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

Привет,

Любое обновление по этой проблеме, я использую .net core 2.1 и axios 0.18.

Спасибо.

Я не думаю, что проблема в Axios, проблема в вашем внутреннем сервере.

Для меня у меня есть архитектура с Flask на бэкэнде и с использованием axios в Vue.JS, единственное, что мне нужно было сделать на моем сервере Flask, это:

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

Это не должно идти в производство, вы также можете иметь список разрешенных перекрестных источников на уровне nginx. Я прочитал это , может быть полезно.

В качестве временного решения вы можете использовать это: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

Ничего лучшего пока не нашел ..

Плохая идея

Я столкнулся с этой проблемой, когда попытался просто сделать запрос axios.get() к API погоды Darksky. Когда я прочитал страницу часто задаваемых вопросов Darksky, я обнаружил вопрос, касающийся той же самой проблемы, они ответили, сказав, что использовали это в качестве меры безопасности для предотвращения непреднамеренного злонамеренного доступа к своей информации, и предложили создать прокси для доступа к своей базе данных.

Я внес следующие изменения в свой файл package.json (я использую приложение create-response-app):

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

myKey был предоставлен мне Darksky для доступа к их данным.

Это было очень простое решение, и оно сработало для меня! Я подозреваю, что многие службы api начнут использовать это в качестве меры безопасности. Надеюсь, мое решение поможет другим справиться с подобными проблемами.

В итоге: создайте прокси.

Спасибо @fernandoruch . У меня это работает, когда я добавляю его в app.js своего сервера node.js

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 с заполнением или JSON-P) используется для запроса данных с сервера, находящегося в другом домене, чем клиент. JSONP позволяет обмениваться данными в обход политики одного происхождения.

Я просто использую jquery $ .get для внешних вызовов API.

если вы хотите получить данные из стороннего API или URL-адреса, у которого есть проблема с его заголовком CORS (отсутствует или содержит несколько значений), я думаю, что единственное решение для этого - использовать эту ссылку
" https://cors-anywhere.herokuapp.com/ "
Я использую ссылку для небольших проектов, но для больших проектов вы можете создать свой собственный api для обработки вызовов и создания api, вы можете использовать проект с открытым исходным кодом https://github.com/Rob--W/cors-anywhere / .

Этот будет работать:

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

@yasincidem - Вы абсолютный бриллиант для этого предложения. Ура - я прошел по многим следам в Интернете в поисках решения, и ваше первое решение, которое сработало для моего конкретного сценария.

Я просто столкнулся с этой проблемой. У меня было {withCredentials: true} (копия и вставка из другого моего API) для работы этого конкретного стороннего API. Я просто удалил {withCredentials: true}

Это решение работает для меня

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

ссылка https://stackoverflow.com/questions/42422494/cross-domain-at-axios

если вы хотите получить данные из стороннего API или URL-адреса, у которого есть проблема с его заголовком CORS (отсутствует или содержит несколько значений), я думаю, что единственное решение для этого - использовать эту ссылку
" https://cors-anywhere.herokuapp.com/ "
Я использую ссылку для небольших проектов, но для больших проектов вы можете создать свой собственный api для обработки вызовов и создания api, вы можете использовать проект с открытым исходным кодом https://github.com/Rob--W/cors-anywhere / .

Этот будет работать:

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

Замечательно работает !!!

мы также столкнулись с этой проблемой при переходе на axios
наша установка: webpack + devServer (с прокси) + axios

проблема заключалась в том, что мы использовали наш полный URL-адрес api в качестве baseURL в axios вместо просто '/ api' (прокси выполняет сопоставление через целевой атрибут)

На мой взгляд, это может быть связано с нашими собственными ошибками. У меня та же проблема, что и выше. 2 дня я нашел время искать эту проблему. Оказывается, я обнаружил небольшую проблему. введенный мной URL-адрес не соответствует документации по синтаксическому анализу. и теперь axios отлично работает на моем angular 7

Проверьте, включен ли CORS для фляги или другого сервера.
Также проверьте правильность адреса сервера. Я застрял только потому, что забыл добавить порт сервера.
axios.get ('http: // localhost: 5000 / jsonshow')
.then (ответ => (this.array = ответ))

Измените " localhost: 3000 " на " http: // localhost : 300", у меня все нормально (убедитесь, что корс включен на стороне сервера)

Измените " localhost: 3000 " на " http: // localhost : 300", у меня все нормально (убедитесь, что корс включен на стороне сервера)

если вы используете порт 300, а не 3000.

в VueJS вы можете создать мерзость с именем vue.config.js в корне проекта, если она не существует, и добавить что-то вроде

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

Тогда ваш звонок Axios должен выглядеть так:

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

если вы хотите получить данные из стороннего API или URL-адреса, у которого есть проблема с его заголовком CORS (отсутствует или содержит несколько значений), я думаю, что единственное решение для этого - использовать эту ссылку
" https://cors-anywhere.herokuapp.com/ "
Я использую ссылку для небольших проектов, но для больших проектов вы можете создать свой собственный api для обработки вызовов и создания api, вы можете использовать проект с открытым исходным кодом https://github.com/Rob--W/cors-anywhere / .

Этот будет работать:

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

Это сработало для меня! Спасибо!

Попробуй это :

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

если вы хотите получить данные из стороннего API или URL-адреса, у которого есть проблема с его заголовком CORS (отсутствует или содержит несколько значений), я думаю, что единственное решение для этого - использовать эту ссылку
" https://cors-anywhere.herokuapp.com/ "
Я использую ссылку для небольших проектов, но для больших проектов вы можете создать свой собственный api для обработки вызовов и создания api, вы можете использовать проект с открытым исходным кодом https://github.com/Rob--W/cors-anywhere / .

Этот будет работать:

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

Экономя мое время, спасибо вам большое!

@ronnin Для записи, я попробовал ваше решение, но оно не работает.

Какие? Действительно? Для меня это определенно сработало ...
Для метода GET работает как шарм!

Вот пример, который я сделал с использованием общедоступного API на основе комментария
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

Сейчас 2019 год, есть ли обновления? 😃

Я использую это расширение Chrome для разработки своего приложения
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin Для записи, я попробовал ваше решение, но оно не работает.

Мужчины, попавшие в беду, плохо знакомы с CORS, и им следует прочитать упомянутую ранее статью @ seungha-kim: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

В качестве резюме:

1. Запрошенные вами удаленные ресурсы, если они находятся не на том же хосте, с которого выполняется запрос (так называемое: origin), должны предоставлять дополнительный заголовок CORS вместе с ресурсом, также известным как. Разрешить контроль доступа: хост (источник), заголовки, методы и т. Д.
2. запрос браузерами или curl с заголовком 'Access-Control-Request-Method', запрос с помощью метода 'OPTIONS' будет выполняться сначала автоматически перед предполагаемым методом: 'GET', 'POST' и т. д.
   Это означает, что обработчики удаленных ресурсов должны специально обрабатывать метод OPTION. например (nginx):
   заводной
   location / 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, If-Modified-Since, Cache-Control, Content-Type, Authorization ';
   add_header 'Access-Control-Allow-Methods' OPTIONS, GET, POST, PUT, PATCH, DELETE ';
   add_header 'Access-Control-Allow-Credentials' истина;
   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. как упоминалось выше, я не использовал значение * для каждого заголовка Access-Control-Allow- *.
   значение *, имеет множество ограничений.
   а. value * для Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods не может работать с Access-Control-Allow-Credentials = true. если с запросом требуется cookie, вам понадобится Access-Control-Allow-Credentials = true
   б. только * действительно, * .google.com НЕПРАВИЛЬНО

1. Access-Control-Allow-Headers - это список заголовков вашего запроса, возможно вместе с. наличие некоторых заголовков, которых нет в списке, заблокирует вас. просто проверьте и выберите заголовки в Access-Control-Allow-Headers

2. Проблема в основном не в клиенте (браузере, вашем клиентском приложении), а в запрошенном сервере.

3. поговорите со своим серверным товарищем по разработке

Надеюсь, это поможет

@ronnin : Если я правильно понимаю из ваших

@ronnin : Если я правильно понимаю из ваших

Используйте следующее приложение ниже, чтобы заставить ur запросы работать

Это сработало для меня, хотя сервер не включил CORS

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

Использование :

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

@ronnin : Если я правильно понимаю из ваших

если мой запрос GET запрашивает ресурс с какого-то сервера, на котором они не включили CORS, в основном мы ничего не можем сделать из внешнего интерфейса через
Это браузер, который следует протоколу и отклоняет ваш запрос.
но вы можете получить ресурс с помощью обычного запроса браузера, например location.href, iframe, form.action

В основном мы настраиваем собственный обратный прокси-сервер (например, nginx) с саморегулируемой серверной стороной, чтобы решить проблему с запросом 3-го ресурса без включенного CORS.
Приложение Heroku, упомянутое @ndjerrou , именно так.

у нас есть беспилотные автомобили и искусственный интеллект, но мы все еще боремся с CORS

Мне удалось решить эту проблему, используя heroku в качестве прокси.

Вот мой код;

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

Сейчас 2020 год, есть ли обновления? 😃

Могу подтвердить, это 2020 год, а обновлений до сих пор нет.
fetch () имеет режим mode: 'no-cors' , почему в axios нет чего-то похожего?

Я пытался

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

И ни один из этих заголовков не работал. Я пробовал withCredentials как в истинном, так и в ложном состояниях, не сработало.

С fetch это просто работает.

Что мне делать, если я не хочу иметь дело с политикой CORS и по-прежнему использую axios?
Изменить: Плюс, какого черта эта проблема закрыта? Очевидно, у нас все еще есть проблемы с этим.

Вам необходимо определить 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' в заголовках ответа, а НЕ в заголовках запроса.

Могу подтвердить, это 2020 год, а обновлений до сих пор нет.
fetch () имеет режим mode: 'no-cors' , почему в axios нет чего-то похожего?

Я пытался

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

И ни один из этих заголовков не работал. Я пробовал withCredentials как в истинном, так и в ложном состояниях, не сработало.

С fetch это просто работает.

Что мне делать, если я не хочу иметь дело с политикой CORS и по-прежнему использую axios?
Изменить: Плюс, какого черта эта проблема закрыта? Очевидно, у нас все еще есть проблемы с этим.

С axios проблем нет, поэтому вопрос был закрыт. просто сядьте и прочтите статью о MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙 ， 徒劳无功

Спасибо, ребята, это помогло! Простите за неудобства!

У меня была эта ошибка на axios, когда я был на мобильной точке доступа своих устройств. Затем, когда я использовал Wi-Fi в кафе, я не получил CORB

Я пробовал использовать Wikipedia API, и у меня возникла та же проблема.
Добавление origin=* к URL исправило это.

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

Я решил это, не используя axios, попробовал GET из внешних URL-адресов с помощью $ ajax и $ get, не имел проблем со старым материалом jquery. Это наверняка ОШИБКА.

Сейчас 2021 год, есть ли обновления? 😃

У меня возникла аналогичная проблема, связанная с Access-Control-Allow-Headers, при попытке задействовать zapier webhook из axios (0.18.0) и chrome (75.0.3770.100).

Моя просьба:

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

Я получаю сообщение об ошибке неподдерживаемого заголовка:

заблокировано политикой CORS: тип содержимого поля заголовка запроса не разрешен Access-Control-Allow-Headers в предпечатном ответе

Прочитав эту страницу, я понял:

• 1. Zapier необходимо настроить ответ своего сервера для поддержки заголовков Access-Control-Request-Headers как минимум для "типа содержимого".
• 1. Мне нужно настроить свой запрос так, чтобы каким-то образом исключить проверку заголовка типа содержимого во время предполетной OPT.

Есть ли какие-либо предложения по реализации варианта 2? Типичные проблемы Zapier с заголовками

Изменить: я убежден, что это мало / не имеет ничего общего с аксиомами, но довольно плохая поддержка со стороны Zapier. Запрос, похоже, работает после переключения на GET с параметрами URL.

Хорошо, если в часто задаваемых вопросах они упоминают, что вам не нужны какие-либо параметры типа контента,
мог бы просто попробовать ол
Var xhr = new XMLHTTPRequest () и попробуйте это без аксиомов.

Ваша публикация в веб-перехватчике находится на клиенте или на сервере?

Во вторник, 25 июня 2019 г., 15:27 Пит Шмитц [email protected] написал:

У меня аналогичная проблема, связанная с "Access-Control-Allow-Headers".
при попытке использовать zapier webhook из axios (0.18.0) и chrome
(75.0.3770.100).

Моя просьба:

axios.post ("https://hooks.zapier.com/hooks/catch/xxx/xxxx", {электронная почта});

Я получаю сообщение об ошибке неподдерживаемого заголовка:

заблокировано политикой CORS: тип содержимого поля заголовка запроса не разрешен
с помощью Access-Control-Allow-Headers в предполетном ответе

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

Прочитав эту страницу, я понял:

-
1. Zapier необходимо настроить ответ сервера на поддержку.
Заголовки запроса-контроля доступа по крайней мере для "типа содержимого"
-
1. Мне нужно настроить свой запрос, чтобы как-то исключить
проверка заголовка "content-type" во время предполетной OPT.

Есть ли какие-либо предложения по реализации варианта 2? Общие проблемы Zapier
о заголовках запроса-контроля доступа
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
предлагает "не настраивать тип содержимого" вашего запроса. Тем не менее, я
в моем запросе нет ни параметров заголовка, ни заголовков по умолчанию
настроен на axios, поэтому я могу только предположить, что это неявно на конце axios?

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG63LVNVM
или отключить поток
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

Есть новости по этому поводу? Я почти в одной лодке.

@imranimu Проблема заключается в комбинации используемого вами браузера и сервера, к

У вас есть несколько вариантов:

Если вы управляете запрашиваемым сервером, разрешите ему отвечать на все запросы OPTIONS со следующими заголовками:

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

С помощью express это может выглядеть примерно так, размещенное перед другими маршрутами в вашей цепочке промежуточного программного обеспечения:

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

Вы также должны добавить к ответу заголовок Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> .

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

Проще говоря, браузер знает, когда вы запрашиваете ресурс из другого источника (домена), поэтому он отправляет предполетную проверку (используя тип метода запроса OPTIONS, а не GET, POST и т. Д.), Чтобы узнать, говорит ли сервер, что все в порядке. получить запрос. Это базовая мера безопасности браузера, позволяющая снизить вероятность использования вашего API сторонним веб-сайтом, чего вы, возможно, не захотите. Приведенный выше код в основном говорит о том, что конкретный веб-сайт может использовать API. Если он может использоваться всеми веб-сайтами, вы должны установить Access-Control-Origin: * .

В качестве альтернативы, если вы не управляете сервером, на который отправляете запрос, откройте маршрут на сервере, обслуживающем страницу, который делает (прокси) запрос за вас. Это работает, потому что открытый маршрут имеет тот же источник (домен), что и ваше приложение, поэтому политика CORS не применяется, а сервер, на котором вы предоставили маршрут, не является браузером, поэтому не получит ошибку CORS.

@ Aitchy13 сервер API, к Access-Control-Origin: * , консоль выдает мне эту ошибку, как в этой проблеме,

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 ‘*’).

Также вы говорите, чтобы добавить ...

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

... но разве Access-Control-Allow-Origin только для ответов, а не для запросов?

Не поддерживается, если Access-Control-Allow-Origin : * ... очень странно.

Вот некоторые из заголовков ответов API для некоторых ссылок, которые помогут помочь в будущих возможных решениях:

(Это отключено от запроса метода OPTIONS перед фактическим запросом, который отклонен из-за CORS)
ЗАГОЛОВКИ ОТВЕТОВ

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

Или у меня что-то не так? Собирался сломать свой ноутбук пополам из-за этой проблемы.

У меня была такая же проблема, после нескольких попыток, тестирования некоторых решений, ни одно не сработало. только после установки прокси в package.json.
добавляет:
"прокси": "адрес API"
что он обойдет корс.

@IkarosFeitosa Можете ли вы опубликовать конфигурацию прокси-сервера?

@zacharytyhacz вы не можете отправлять учетные данные браузера, когда сервер отвечает Access-Control-Allow-Origin: * .

Или:

1. измените * на конкретный адрес веб-сайта.
2. установите ...withCredentials: false в параметре config / options функции запроса axios, которую вы используете.
3. установите свойство прокси в параметре config / options функции запроса axios, которую вы используете, на действительный прокси (пример ниже)

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

Какой-либо прогресс? Я настраиваю свой веб-сервер для установки заголовка ответа, но, похоже, это не работает.

Я путаю этот совет по ошибке:

CORS должен быть ограничением веб-браузера, ему нужно разрешить возврат сервера, я уже разрешаю этот cors, но затем браузер сказал мне No 'Access-Control-Allow-Origin' header is present on the requested resource .

Я пробую конфигурацию сервера cors с помощью fetch api, он работает хорошо.

Если вы используете nodejs с express . Этот пост может вам помочь.

Если вы хотите, чтобы был разрешен только некоторый путь, например, cors:
/home/fridge - запрещено из других источников
/home/toilet - должно быть разрешено из других источников

Вы можете попробовать следующую реализацию (сработала для меня)

В routes / 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);
});

Если вы не используете nodejs с экспрессом - попробуйте поискать в Google запрос метода OPTIONS

Протестировано из экспресс: 4.16.3

Нет, :) Это проблемы при разработке (мы используем http)
когда мы выпускаем на сервере (мы используем https)
Этого не случилось.
Так что просто установите надстройку: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

app.use (function (req, res, next) {
res.header ('Доступ-Контроль-Разрешить-Происхождение', '*');
res.header ('Access-Control-Allow-Headers', 'Источник, X-Requested-With, Content-Type, Accept');
следующий();
});

Вот и решила моя жизнь !!

Спасибо за предложение. Я обновил свой код, чтобы направить запрос через прокси:

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

Однако я все еще получаю эту ошибку:

Запрос на кросс-источник заблокирован: та же политика происхождения запрещает чтение удаленного ресурса по адресу https://a.4cdn.org/a/threads.json. (Причина: заголовок CORS «Access-Control-Allow-Origin» не соответствует « https://boards.4chan.org »).

Я просмотрел различные форумы и вопросы о переполнении стека, и я не могу найти никакого решения для этого. Был бы признателен, если бы кто-нибудь мог дать некоторое представление.

Привет, ребята, попробуйте это перед вызовом axios, у меня это сработало

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

это было мое решение

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

Я создам видео о том, как исправить эту проблему CORS. Я обновлю этот комментарий ссылкой на свое видео на YouTube.

Редактировать:
https://youtu.be/hxyp_LkKDdk

Сейчас 2021 год, есть ли обновления? 😃

Да, я так сильно увлекся своим дерьмом, что мне действительно пришлось проверить это дерьмо в том году 😆

Просто используйте fetch чтобы сначала проверить, работает ли серверный сервер.

А также...

axios может запросить мой koa-server , но не iris напрямую, оба они используют популярное промежуточное программное обеспечение cors.

1358

Почему нет официального решения этой проблемы? Я прочитал всю эту ветку и озадачен тем, что кажется универсальной проблемой, которую на самом деле никто не решает каким-либо стандартным способом.

Почему нет официального решения этой проблемы? Я прочитал всю эту ветку и озадачен тем, что кажется универсальной проблемой, которую на самом деле никто не решает каким-либо стандартным способом.

Вся проблема CORS не в Axios и даже не в самом JavaScript. Это функция безопасности, встроенная в большинство или все браузеры. Есть способы обойти это, но сервер должен ответить правильными заголовками.

Почему нет официального решения этой проблемы? Я прочитал всю эту ветку и озадачен тем, что кажется универсальной проблемой, которую на самом деле никто не решает каким-либо стандартным способом.

Вся проблема CORS не в Axios и даже не в самом JavaScript. Это функция безопасности, встроенная в большинство или все браузеры. Есть способы обойти это, но сервер должен ответить правильными заголовками.

Итак, учитывая этот ответ, какой тогда наиболее «успешный» способ реализации исправления проблемы CORS?

Хорошо, после двух дней исследований я наконец понял.

Строго говоря, это не вопрос axios. На самом деле это даже не должно считаться проблемой. axios был разработан для работы в соответствии со всеми этими странными и раздражающими стандартами CORS, поэтому ожидается сообщение: CORS header ‘Access-Control-Allow-Origin’ missing , это правильная работа axios. В примере с 4chan api, как было сказано ранее, проблема не в axios, а в самом API 4chan, который не следует стандартам CORS.

Некоторые люди предложили старый трюк с использованием прокси, чтобы избежать проверки всех этих заголовков. Вот блог Негара Джамалифарда, объясняющий, как это сделать: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Кстати , Я не уверен, что это можно считать плохой практикой.

В моем случае я два дня пытался подключиться к asp net core api на моем собственном локальном хосте, пока я не понял axios, перед отправкой моего запроса на получение автоматически отправлялся «предполетный запрос», который отправляется как метод OPTIONS, которым был мой сервер не готов справиться. Если есть кто-то, кто виноват, так это хром и firefox за отображение столь неоднозначного сообщения.

Некоторые люди предложили старый трюк с использованием прокси, чтобы избежать проверки всех этих заголовков. Вот блог Негара Джамалифарда, объясняющий, как это сделать: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 Кстати , Я не уверен, что это можно считать плохой практикой.

Так что просто проксирование - лучший случай для таких звонков? Это позор.

Так что просто проксирование - лучший случай для таких звонков? Это позор.

Что ж ... вы также можете попытаться поговорить с чуваком, который создает api, который вы пытаетесь использовать, и попросить его исправить это.

Я решил проблему:
для axios: url = " http: // localhost : 8080" method = 'post'
для моего ответа сервера Django:
uesrItem = {'пользователь': 'xxx'}
ответ = JsonResponse (userItem)
response ["Access-Control-Allow-Origin"] = " http: // localhost : 8080"
ответ ["Access-Control-Allow-Credentials"] = 'true'
response ["Access-Control-Allow-Methods"] = "POST, OPTIONS"

Проблема не в аксиомах, а в API, который вы запрашиваете!

Например, я написал API во Flask, а метод GET был таким:

@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)

Но проблема была решена, когда я добавил заголовок в ответ 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

Затем я записываю свой ответ axios и получаю его:

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

Я не знаю, какой API вы все используете, но во Flask все было решено!

В моем случае с аксиомами все было в порядке. Я просто попросил парня, создавшего API, включить серверную часть CORS.

попробуй это

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

Я использовал обходной путь https://github.com/Rob--W/cors-anywhere и работает нормально, но в продукте я попрошу парня, который сделал api, включить cors для моего домена

Я не думаю, что вы можете разрешить CORS непосредственно в axios, потому что CORS - это ограничение браузера, которое находится между вашим браузером и целевыми серверами.

Вы также можете:

1. Включите Access-Control-Allow-Origin в заголовки ответов с целевого сервера .
2. Не включайте имя хоста в свой запрос axios, чтобы он запросил ваш исходный сервер . Затем с исходного сервера вы можете делать с целевым сервером все, что хотите.

Пожалуйста, укажите подробный пример фрагмента кода.
Это будет полезно.

У меня была такая же проблема на моем местном.
Я добавил корс на свой бэкэнд и решил. :)

Это не проблема с axios Это проблема с серверной частью. Я использую Django. И добавление этих двух решит проблему.

Добавить CORS Middlewear

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

И позволяя CORS.
(Разрешение CORS для всех)

CORS_ORIGIN_ALLOW_ALL = True

(Это немного небезопасно, поскольку допускает любое происхождение. Это сделает его уязвимым для атак CSRF)
Следовательно, для производства разрешено только определенное происхождение.

CORS_ORIGIN_ALLOW_ALL = False

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

Пример: +1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

Всем привет,
Как уже упоминалось, эта проблема связана с защитой браузера от запросов из разных источников. Я решил это, следуя этим инструкциям: https://support.google.com/chrome/thread/11089651?hl=en

Для тех, кто все еще борется:
Надеюсь, теперь вы понимаете, что это не проблема Axios, и браузер блокирует CORS из-за того, что сервер не устанавливает заголовок. Если вы понимаете это и по-прежнему испытываете проблемы с тем, что ваш собственный сервер не устанавливает заголовки , обязательно установите его на своем реальном веб-сервере при использовании обратного прокси. Например, многие приложения Node / Express обслуживаются NGINX в производственной среде с обратным прокси-сервером. См. Enable-cors.org, чтобы узнать, как установить его в NGINX.

Для тех, кто все еще борется:
Надеюсь, теперь вы понимаете, что это не проблема Axios, и браузер блокирует CORS из-за того, что сервер не устанавливает заголовок. Если вы понимаете это и по-прежнему испытываете проблемы с тем, что ваш собственный сервер не устанавливает заголовки , обязательно установите его на своем реальном веб-сервере при использовании обратного прокси. Например, многие приложения Node / Express обслуживаются NGINX в производственной среде с обратным прокси-сервером. См. Enable-cors.org, чтобы узнать, как установить его в NGINX.

Я боролся 3 часа, ничего не изменилось на стороне клиента, наконец, я добавил следующие вещи на сервер:

установить корки для яиц (только для проекта с яйцом)

// ./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
  };

это все

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

Просто используйте fetch чтобы сначала проверить, работает ли серверный сервер.

А также...

axios может запросить мой koa-server , но не iris напрямую, оба они используют популярное промежуточное программное обеспечение cors.

1358

Это сработало для меня, и мне нужно узнать, почему

Я работал с Tornado и Vuejs, проблема не в axios, на моем бэкэнде добавлено:

# 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
Это сработало
Verrrrrrrrrrry Спасибо

У меня такая же проблема
Мой код
axios ({
метод: "получить",
url: "http: // localhost: 4000 / users",
})
.then (response => {
console.log (ответ);
})
.catch (Ошибка => {
console.log (Ошибка)
});
}
Получение этой ошибки
Доступ к XMLHttpRequest по адресу ' http: // localhost : 4000 / users' из источника ' http: // localhost : 3000' был заблокирован политикой CORS: ответ на предварительный запрос не проходит проверку контроля доступа: нет 'Access-Control Заголовок -Allow-Origin 'присутствует в запрошенном ресурсе.

Может ли кто-нибудь дать мне пошаговое решение того, что мне делать?

@albertpinto Прежде всего, вы должны понимать, что проблема не в

@albertpin, чтобы посмотреть все возможные решения в этой мега-ветке. На вашей стороне это не проблема на стороне клиента / интерфейса - это на самом деле сервер (localhost: 4000). Сервер должен ответить заголовками CORS, чтобы разрешить источник.

Например, ваш сервер должен отвечать такими заголовками, как:

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

Я решил это следующим образом:

1. Установите cors npm: npm install cors (в моем случае на сервере остальных узлов http: // localhost: 4000)

Это также касается вашей конечной точки:
var cors = require ('cors')
var express = require ('экспресс')
var cors = require ('cors')
вар приложение = экспресс ()
app.use (cors ())

Спасибо за все предложения!

// Для CORS, если вы используете express js, вы можете просто использовать пакет cors через npm.

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

cURL не применяет правила CORS. Эти правила применяются браузерами в целях безопасности.

Когда вы упоминаете, что добавили соответствующий заголовок, я предполагаю, что вы имеете в виду, что добавили эти заголовки в запрос. Фактически, заголовок ожидается в заголовках ответа от сервера, указывая, что к ресурсу разрешен прямой доступ другим веб-сайтам.

К вашему сведению, CORS - совместное использование ресурсов между источниками. Поскольку ваш API не поддерживает его, у вас есть два варианта:

1. Используйте прокси-сервер в том же домене, что и ваша веб-страница, для доступа к API 4chan или,
2. Используйте прокси-сервер в любом другом домене, но измените ответ, включив в него необходимые заголовки.

Я хочу проголосовать за то, чтобы закрыть этот вопрос как «Не проблема».

@sunnykgupta
та же логика, то же тело, но угловой HTTP-запрос на удаленную конечную точку бэкэнд не получает ошибку блока CORS

Если у вас запущен сервер Go, предложите вам использовать 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))

Я решил это следующим образом:

1. создайте файл vue.config.js в корне проекта рядом с package.json, содержащий:

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

2. сделайте http-запрос следующим образом:

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', {
заголовки: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Тип содержимого, авторизация',
},
прокси: {
хост: '104.236.174.88',
порт: 3128
}
}). then (function (response) {
console.log ('ответ:' + response.data);
}). catch (function (error) {
if (error.response) {
console.log (error.response.headers);
}
else if (error.request) {
console.log (error.request);
}
еще {
console.log (сообщение об ошибке);
}
console.log (error.config);
});

Всем привет,
Я просто публикую это, так как мне потребовались часы, чтобы решить эту проблему.

Прежде всего, CORS определенно является проблемой на стороне сервера, а не на стороне клиента, но я был более чем уверен, что код сервера был правильным в моем случае, поскольку другие приложения работали с одним и тем же сервером в разных доменах. Проблема началась, когда я начал использовать axios со своим пользовательским экземпляром.

В моем случае это была очень специфическая проблема, когда мы использовали baseURL в экземпляре axios а затем пытаемся сделать вызовы GET или POST из любого места, axios добавляет косую черту / между baseURL и URL-адресом запроса. Это тоже имеет смысл, но это была скрытая проблема. Мой сервер Laravel перенаправлял, чтобы удалить завершающую косую черту, которая вызывала эту проблему.

В общем, предварительный запрос OPTIONS не поддерживает перенаправления. Так что обязательно проверьте это и избегайте этого.

Я надеюсь, что это может кому-то помочь, хотя это не ошибка.