как исправить «Доступ к XMLHttpRequest заблокирован политикой CORS» Перенаправление не разрешено для предварительного запроса только один маршрут

Question

Я устанавливаю laravel и vuejs.

Плагин CORS для Laravel и внешнего интерфейса. Я использую Axios для вызова REST API

.

я получил эту ОШИБКУ Доступ к XMLHttpRequest по адресу https://xx.xxxx.xx' от источника 'http://localhost:8080' заблокирован политикой CORS: ответ на предпечатную проверку запрос не проходит проверку контроля доступа: перенаправление не разрешено для предполетный запрос.

this is for a vuejs axios setup  **main.js**
axios.defaults.baseURL = process.env.BASE_URL;
axios.defaults.headers.get['Accepts'] = 'application/json';
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';

  **content.vue file**

  this.loading = true;
      var companyId = this.$route.params.cid;
      var userId = this.$route.params.uid;
      const thisVue = this;
      var formData = new FormData();

  let data = {};

  formData.append("subject", this.title);
  formData.append("content", this.content);
  formData.append("posting_article_url", this.blog_link);
  formData.append("recruitment_tension", this.sel_recruitment_tension);
  formData.append("why_hire_engineer", this.sel_company_hire_engineer);
  formData.append("technique_skill", this.requiredTechniqueSkill);
  formData.append("better_technique_skill",this.betterTechniqueSkillIfThereIs);
  formData.append("personality", this.requiredPersonality);
  formData.append("any_request", this.anyRequest);
  formData.append("location", this.location);
  formData.append("supplement_time", this.supplement_time);
  formData.append("supplement_contract", this.supplement_contract);
  formData.append("en_benefits", this.en_benefits);
  formData.append("recruit_role", this.recruit_role);
  formData.append("how_to_proceed", this.how_to_proceed);
  formData.append("current_structure", this.current_structure);
  if (this.selectedSkill.length > 0)
  {
    let selectedSkills = this.selectedSkill
    .filter(obj => {
      return  obj.id;
    })
    .map(item => {
      return item.id;
    });
    formData.append("skill_keyword", selectedSkills);
  }
  if (this.imageBlob != "") {
    formData.append("image", this.imageBlob, "temp.png");
  }
  for (var i = 0; i < this.sel_schedule.length; i++) {
    formData.append("freelance_type[" + i + "]", this.sel_schedule[i])
  }
  for (var i = 0; i < this.sel_type_of_contract.length; i++) {
    formData.append("contract_type[" + i + "]", this.sel_type_of_contract[i])
  }
    this.loading = false;
    $('html, body').animate({scrollTop:300}, 'slow');
  } else {
     axios
    .post(
      "/xx/xxx/?token=" + localStorage.getItem("token"),
      formData,
      {
        headers: [
            { "X-localization": localStorage.getItem("lan") },
            { "Access-Control-Allow-Origin": '*' },
            { "Access-Control-Allow-Headers": 'Origin, X-Requested-With, Content-Type, Accept '},
            { "Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS, DELETE" },
            { "Access-Control-Max-Age": 3600 }
          ]
      }
    )
    .then(res => {
      if (!res.data.result) {
         if (res.data[0]) {
          this.$toaster.error(res.data[0]);
          this.$store.dispatch("logout");
        }
        if (res.data.errors) {
            for (var i = 0; i < res.data.errors.length; i++) {
              this.$toaster.error(res.data.errors[i].message);
            }
        }
        this.loading = false;
      } else {
        this.$toaster.success(thisVue.$t("success_recruit_add"));
      }
    })
    .catch(() => {
      this.$toaster.error(thisVue.$t("err_network"));
    });
  }

ошибка происходит только на одном маршруте, все остальные работают. также работает на Почтальон

Answer 1

Отключение политики безопасности CORS:

1. Перейдите в расширение Google и найдите Allow-Control-Allow-Origin .
2. Теперь добавьте его в Chrome и включите.

3. Добавьте https://localhost к настройке, подобной снимку экрана:

   

4. Теперь закройте все браузеры Chrome и откройте cmd.Затем выполните следующую команду:

   «C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe» –allow-file-access-from-files --disable-web-security--user-data-dir --disable-features = CrossSiteDocumentBlockingIfIsolating

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

   

   Если вы не видите уведомления, то команда не работает.Поэтому вам следует проверить ссылку на каталог, указанную в команде, чтобы убедиться, что в этой ссылке на каталог существует файл chrome.exe.Если вы найдете файл chrome.exe, то после закрытия браузера Chrome вам следует проверить диспетчер задач, работает ли какая-либо другая служба Chrome в фоновом режиме.После закрытия всех служб команда должна работать должным образом.

Internet Explorer:

1. Чтобы отключить политику Cors в Internet Explorer, перейдите на internet option > security > Internet иСнимите флажок Включить защищенный режим.

2. Затем нажмите на пользовательский уровень и включите Доступ к источникам данных через домены в разделе Разное, как показано на рисунке ниже.Выполните ту же процедуру для internet option > security > Local intranet.

   

Надеюсь, это решит вашу проблему.

Answer 2

Возможно, вы неправильно настроены на стороне веб-сервера или Laravel. Возможно, вам поможет это решение: Почему мой веб-сервер nginx не обрабатывает шрифты ttf? .

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

Answer 3

я получил решение у меня есть изменение конечной точки API

before i call like this:

http://localhost:8080/api/create/

now, i just remove the shash '/'

http://localhost:8080/api/create 

работает на моем производственном сервере

Answer 4

Проблема со стороны сервера, в нашем случае это Laravel, в вашем config / cors.php попробуйте использовать приведенный ниже конфиг:

'supportsCredentials' => true,
'allowedOrigins' => ['*'],
'allowedOriginsPatterns' => [],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,

Или вы можете попробовать использовать этот код в верхней части public / index.php

Редактировать

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X- 
Request-With');