如何修复“对 XMLHttpRequest 的访问已被 CORS 策略阻止”预检请求仅允许一条路由重定向

Question

我正在设置 laravel 和 vuejs。

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

我得到这个错误访问 XMLHttpRequest at ‘ https://xx.xxxx.xx ’ from origin ‘ 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"));
    });
  }

错误只发生在一条路线上，其余的都在工作。也在做 邮递员

原文由 priyeshvadhiya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

服务器端的永久解决方案：

最好和安全的解决方案是允许从服务器端进行访问控制。对于 laravel，您可以按照以下步骤操作：

在 App\Http\Middleware\Cors.php ：

 public function handle($request, Closure $next)
{
    return $next($request)->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods','GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS');
}

在 App\Http\Kernel.php ：

 protected $middleware = [
    ...
    \App\Http\Middleware\Cors::class,
];

浏览器端的临时解决方案：

如果要从浏览器端禁用 CORS，请执行以下步骤之一：

Safari： 从 Preferences > Advanced 启用开发菜单。然后从开发菜单中选择“禁用跨域限制”。

Chrome（扩展）： 使用 Chrome 扩展 允许 CORS：Access-Control-Allow-Origin

Chrome (CMD)： 关闭所有 Chrome 浏览器和服务。然后运行以下命令：

视窗：

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

苹果电脑：

 open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

原文由 Md Riadul Islam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

问题来自您的 Vue 应用程序。

例如：您正在请求以下网址：

 https://example.com/api/methods/

后端将其重定向到：

 https://example.com/api/methods

注意末尾的斜杠。

原文由 Ritchi 发布，翻译遵循 CC BY-SA 4.0 许可协议