IT技术 - 如何修复“对 XMLHttpRequest 的访问已被 CORS 策略阻止”的预检请求不允许重定向，只有一个路由 - 吾爱随笔录

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

IT技术 javascript laravel vue.js vuejs2

2021-03-09 04:27:36

我正在设置一个 Laravel 和 vuejs。

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

我收到此错误访问 XMLHttpRequest at ' https://xx.xxxx.xx ' from origin ' http://localhost:8080 ' has been Blocked by CORS policy: Response to preflight request does not pass access control check: Redirect不允许用于预检请求。

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

错误仅发生在一条路线上，其余所有路线都在工作。也在Postman 上工作

6个回答

禁用 CORS 策略安全：

转到 google 扩展程序并搜索Allow-Control-Allow-Origin。
现在将其添加到 chrome 并启用。
将https://localhost添加到它的设置中，如屏幕截图：
现在关闭所有 chrome 浏览器并打开 cmd。然后运行以下命令：

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

如果命令运行正常，您将看到如下通知：

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

IE浏览器：

要在 Internet Explorer 中禁用 cors 策略，请转到internet option > security > Internet并取消选中启用保护模式。
然后单击自定义级别并在杂项下启用跨域访问数据源，如下图所示。对执行相同的过程internet option > security > Local intranet。

希望它能解决你的问题。

链接坏了

2021-05-01 04:27:36

付出了很大的努力，但是，我的情况有所不同。

2021-05-06 04:27:36

这将解决本地机器上的问题。但是当您上线时，问题仍然存在。告诉所有用户安装扩展程序或在他们的浏览器上进行一些设置并不是一个好的解决方案。

2021-05-07 04:27:36

它解决了我的问题，我面临这个问题好几天了

2021-05-14 04:27:36

你的情况是什么？

2021-05-21 04:27:36

问题来自后端，在我们的案例中是 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');

仍然没有工作，我更改了您所说的代码，但是仍然面临同样的错误。

2021-05-14 04:27:36

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

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

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

后端将其重定向到：

https://example.com/api/methods

当心末尾的斜杠。

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

npm install cors

在你的 app.js 中需要 cors。

var cors = require('cors')

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

app.use(cors())

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

创造奇迹！

2021-05-06 04:27:36

cors（跨域资源共享）由服务器端处理。如果您来自 laravel 端，那么barryvdh/laravel-cors包有助于解决此错误

网址：https : //packagist.org/packages/barryvdh/laravel-cors

其它你可能感兴趣的问题

上一篇如何在javascript中使用fetch()读取JSON文件？下一篇使用 JavaScript 向 DOM 添加元素