如何解决"CORS策略已阻止对XMLHttpRequest的访问"仅预检请求仅允许一条路由重定向 [英] 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.

i'm setting a laravel and vuejs.

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

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

我收到此错误 从源访问位于' https://xx.xxxx.xx 的XMLHttpRequest " http://localhost:8080 "已被CORS政策阻止:对预检的响应 请求未通过访问控制检查:不允许重定向 飞行前要求.

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

推荐答案

禁用CORS策略安全性:

1. 转到Google扩展程序并搜索允许控制允许来源.
2. 现在将其添加到chrome并启用.

3. 将 https://localhost 添加到如屏幕截图所示的设置:

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:

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

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

"C:\ Program Files(x86)\ Google \ Chrome \ Application \ chrome.exe" –允许从文件访问文件--disable-web-security --user-data-dir- disable-features = CrossSiteDocumentBlockingIfIsolating

"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:

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

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. 要在Internet Explorer中禁用cors策略，请转到internet option > security > Internet并取消选中启用保护模式.

2. 然后单击自定义级别并启用跨域的Access数据源 如下图所示.遵循相同的过程 用于internet option > security > Local intranet.

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.

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