web-dev-qa-db-fra.com

comment corriger «L'accès à XMLHttpRequest a été bloqué par la stratégie CORS» La redirection n'est pas autorisée pour une demande de contrôle en amont sur un seul itinéraire

enter image description hereenter image description here je mets un laravel et vuejs.

Plugin CORS pour laravel et côté frontend j'utilise Axios pour appeler REST api

j'ai obtenu cette ERREUR L'accès à XMLHttpRequest à ' https: //xx.xxxx.xx ' à partir de l'origine ' http: // localhost: 808 ' a été bloqué par la politique CORS : La réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: La redirection n'est pas autorisée pour une demande de contrôle en amont.

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

l'erreur se produit qu'un seul reste de route fonctionne tous. travaille également sur Postman

javascriptlaravelvue.jsvuejs2
7
priyeshvadhiya

Le problème vient du côté back-end dans notre cas est Laravel, dans votre config/cors.php essayez d'utiliser la configuration ci-dessous:

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

Ou vous pouvez essayer d'utiliser ce code en haut de public/index.php

Modifier 

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');
1
Ali Mohammed

Les cors (Cross-Origin Resource Sharing) gèrent côté serveur. Si vous venez de laravel end donc le package barryvdh/laravel-cors aide à résoudre cette erreur

url: https://packagist.org/packages/barryvdh/laravel-cors

1
Sublime Laravel Dev

Vous avez probablement une mauvaise configuration du côté du serveur Web ou du côté Laravel. Peut-être que cette solution pourrait vous aider: Pourquoi mon serveur Web nginx ne gère-t-il pas les polices ttf? .

Portez une attention particulière à la méthode OPTIONS, car elle active la prise en charge de Preflight.

0
mllnd

Nous pouvons corriger avec APP_URL, si vous l'utilisez comme URL de base pour la demande axios. Veuillez vous assurer que l'URL racine de votre navigateur et APP_URL en .env sont identiques.

Par exemple, si vous exécutez l'application sur " http://127.0.0.1:80 ", alors devrait être l'APP_URL = http://127.0.0.1:80

Et si vous exécutez l'application sur " http: // localhost: 80 ", alors devrait être l'APP_URL = http: // localhost: 80

J'espère que cela vous aidera! Et il est testé avec laravel6.x

0
tanvir993