Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

Tags:

enter image description hereenter image description herei'm setting a laravel and vuejs.

CORS plugin for laravel and frontend side i use Axios to call REST api

i got this ERROR Access to XMLHttpRequest at 'https://xx.xxxx.xx' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

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

the error occur only one route rest all are working. also working on Postman

like image 269
priyeshvadhiya Avatar asked Jan 16 '19 07:01

priyeshvadhiya


2 Answers

Disabling CORS policy security:

  1. Go to google extension and search for Allow-Control-Allow-Origin.
  2. Now add it to chrome and enable.
  3. Add https://localhost to it’s setting like the screen shot:

    enter image description here

  4. Now close all your chrome browser and open cmd. Then run the followin command:

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

    If the command runs properly you will see the following notification like the below screenshot:

    enter image description here

    If you can’t see the notification then the command didn’t work. So you should check the directory link that have been specified in the command to ensure that the chrome.exe file exist in that directory link. If you find the chrome.exe file then after closing the chrome browser you should check the task manager if any other chrome service is running in background. After closing all the services the command should work as expected.

Internet Explorer:

  1. To disable cors policy in internet explorer please go to internet option > security > Internet and uncheck enable protected mode.
  2. Then click on custom level and enable Access data sources across domains under Miscellaneous like the below image. Follow the same process for internet option > security > Local intranet.

    enter image description here

Hope it will solve your problem.

like image 185
Md Riadul Islam Avatar answered Oct 22 '22 14:10

Md Riadul Islam


The issue is from the back-end side in our case is Laravel, in your config/cors.php try to use the below config:

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

Or you can try to use this code in the top of public/index.php

Edit

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'); 
like image 45
Ali Mohammed Avatar answered Oct 22 '22 13:10

Ali Mohammed