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

Question

我正在设置laravel和vuejs。

laravel和前端方面的CORS插件，我使用Axios调用REST API

我从起源' http：// localhost：8080 ' 在' https：//xx.xxxx.xx ' 处获得对XMLHttpRequest的错误访问已被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"));
    });
  }

该错误只发生在一条路线上，其余所有线路都在工作。也从事邮递员工作

Answer 1

问题出在你的 Vue 应用程序上。

例如：您请求以下网址：

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

后端将其重定向到：

https://example.com/api/methods

请注意末尾的斜杠。

Answer 2

禁用CORS策略安全性：

1. 转到Google扩展，然后搜索Allow-Control-Allow-Origin。
2. 现在将其添加到chrome并启用。

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

   

4. 现在关闭所有Chrome浏览器并打开cmd。然后运行followin命令：

   “ C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” –允许文件访问文件--disable-web-security --user-data-dir --disable-features = CrossSiteDocumentBlockingIfIsolating

   如果命令正常运行，您将看到以下通知，如以下屏幕截图所示：

   

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

IE浏览器：

1. 要在Internet Explorer中禁用cors策略，请转到internet option > security > Internet并取消选中启用受保护模式。

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

   

希望它能解决您的问题。

Answer 3

问题来自后端，在我们的案例中是 Laravel，在您的 config/cors.php 中尝试使用以下配置：

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

或者你可以尝试在 public/index.php 的顶部使用这段代码

编辑

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');

Answer 4

问题出在服务器端。如果你使用的是express js。尝试在您的服务器上安装 Express cors 包。

npm install cors

在你的 app.js 中需要 cors。

var cors = require('cors')

然后，将其作为中间件添加到您的应用程序中。

app.use(cors())

安装该软件包后，您不应遇到 cors 问题。