如何修复“对 XMLHttpRequest 的访问已被 CORS 策略阻止"的预检请求不允许重定向，只有一个路由 [英] how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

问题描述

我正在设置 Laravel 和 vuejs.

laravel 和前端的 CORS 插件我使用 Axios 调用 REST api

我收到了这个错误从源访问 '

现在关闭所有 chrome 浏览器并打开 cmd.然后运行以下命令:

C:Program Files (x86)GoogleChromeApplicationchrome.exe" --allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

如果命令运行正常，您将看到如下图所示的通知:

如果您看不到通知，则该命令无效.所以你应该检查命令中已经指定的目录链接，以确保该目录链接中存在 chrome.exe 文件.如果您找到 chrome.exe 文件，那么在关闭 chrome 浏览器后，您应该检查任务管理器是否有任何其他 chrome 服务在后台运行.关闭所有服务后，该命令应按预期工作.

Internet Explorer:

1. 要在 Internet Explorer 中禁用 cors 策略，请转到 internet 选项 >安全 >Internet 并取消选中启用保护模式.

2. 然后单击自定义级别并启用跨域访问数据源在杂项下，如下图所示.遵循相同的过程对于 互联网选项 >安全 >本地内网.

希望它能解决您的问题.

i'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

解决方案

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:

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

   "C:Program Files (x86)GoogleChromeApplicationchrome.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:

   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.

Hope it will solve your problem.

这篇关于如何修复“对 XMLHttpRequest 的访问已被 CORS 策略阻止"的预检请求不允许重定向，只有一个路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！