Запрос Axios заблокирован cors заголовок 'Access-Control-Allow-Origin' отсутствует на запрошенном ресурсе

ProgramBox

Запрос Axios заблокирован cors заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе

Post author:admin
Запись опубликована:20 ноября, 2022
Post category:Вопросы по программированию

#laravel #vue.js #axios

Вопрос:

Я пытаюсь сделать запрос к API ERP и получаю этот ответ:

Доступ к XMLHttpRequest по адресу ‘http://ip:8082/auth » из источника «http://connector.test ‘ заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе.

Хотя в моем запросе есть заголовок Access-Control-Allow-Origin:

         getAuth() {
            axios.post('http://' this.ip   '/auth/', {
                headers: {
                    "Content-Type": "application/json",
                    "Cookie": this.sessionid,
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length"
                }, 
                data: {
                    username: this.username, 
                    password: this.password
                }
            }).then(response => {
                this.getItems();
            })
        },

Cors.php

 'paths' => ['*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

js/bootstrap.js

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE';

Добавлено мое собственное промежуточное программное обеспечение

Middleware/cors.php

   return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
          OPTIONS');

Добавил его в kernel.php тогда $routeMiddleware web.php

 Route::get('/', [AppHttpControllersMainController::class, 'index'])->middleware(Cors::class);

Заголовки запросов

 Request URL: http://ip:8082/auth
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Content-Type: application/json;charset=UTF-8
Referer: http://connector.test/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
X-Requested-With: XMLHttpRequest

Выполнение запроса на серверной части с помощью PHP Curl работает нормально, но я хочу, чтобы он работал во внешнем интерфейсе с помощью Vue.

1. Разрешили ли вы свой источник в своем config/cros.php ? Возможно, вы можете пока использовать подстановочный знак ( * ), чтобы проверить его.

2. В вашем примере вы (как и в клиенте, через axios) отправляете заголовки запроса на сервер. Должно быть наоборот, сервер (работающий по адресу 192.168.1.67: 8082 ) должен отправлять эти (заголовки Access-Control- *) в качестве заголовков ответа.

3. @JoshuaAngnoe Метод POST отлично работает через postman

4. Я думаю, что Postman не придерживается правил / ограничений CORS, это инструмент разработки, поэтому он просто проигнорирует его и выполнит свою работу. Другим примером может быть использование curl для выполнения вызова api, который будет работать. Еще одна вещь, которую вы могли бы сделать, это взглянуть (и, возможно, поделиться с нами) на фактические заголовки ответов, которые сервер отправляет через Инструменты разработчика> Вкладка Сеть> Заголовки ответов

Ответ №1:

Веб-браузеры имеют функцию безопасности для предотвращения массовых DOS-атак на веб-сайты. Короче говоря, любой код, выполняемый на X, не может запрашивать ресурсы на Y, если Y специально не разрешил X запрашивать его. это делается с помощью заголовка Access-Control-Allow-Origins.

Вы должны добавить это на свой веб-сервер или в свой внутренний код.

Ответ №2:

Попробуйте это.

 axios.post('http://yourdomain.com', {
    withCredentials: true,
    // put the rest of your config here
})

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

Это происходит и со мной, и этот метод работает для меня.