enter image description hereenter image description here我要放一架小船和一辆Vuejs.

用于laravel和frontend side的CORS插件我使用Axios调用REST api

我犯了这个错误

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 Extension,搜索Allow-Control-Allow-Origin.
  2. 现在将其添加到chrome并启用.
  3. Add https://localhost to it’s setting like the screen shot:

    enter image description here

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

    "C:\Program Files(X86)\GOOGLE\Chrome\Application\chrome.exe"--ALLOW-FILE-ACCESS-FROM--DISABLE-WEB-SECURITY--USER-DATA-DIR--disable-features=CrossSiteDocumentBlockingIfIsolating

    如果该命令运行正常,您将看到如下通知,如下面的屏幕截图所示:

    enter image description here

    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. 然后单击自定义级别并启用跨域访问数据源

    enter image description here

希望它能解决你的问题.

Laravel相关问答推荐

如何在 Laravel 中使用多对一变形关系

当使用Laravel eloquent查询100000条数据时速度很慢

如何在 vue 模板中引用 laravel csrf 字段

为什么 Laravel 5 会自动更新我的日期字段?

插入重复键时,laravel eloquent 忽略错误

如何处理 Laravel 的 SMTP 驱动程序中的自签名 TLS 证书?

Laravel 没有定义

在Laravel 5中通过ID和所有递归获取记录

在 VSCode 上调试 Laravel 应用程序

如何使用 Laravel 模型访问数据库视图?

Laravel Input:all() 忽略禁用的输入

Laravel 在特定文件夹中创建迁移文件

如果值存在于另一个字段数组中,Laravel 验证规则

测试指向外部站点的重定向链接

在共享主机中仅使用 FTP 部署 Laravel 5

判断输入是否来自控制台

登录后 DevTools 无法解析 SourceMap 错误将重定向到该 js 文件

如何在 Laravel 中显示动态复选框的旧数据?

Laravel 5 Auth注销不起作用

你如何在 Laravel 5.3 的新通知服务生成的Electron邮件中添加图像?