如何修復“對 XMLHttpRequest 的訪問已被 CORS 策略阻止”重定向不允許僅用於一條預檢請求

Question

我正在設置 laravel 和 vuejs。

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

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不允許用於預檢請求。

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

該錯誤僅發生在一條路線 rest 全部正常工作。 也在研究Postman

Answer 1

禁用 CORS 策略安全：

1. 轉到 google 擴展程序並搜索Allow-Control-Allow-Origin 。
2. 現在將其添加到 chrome 並啟用。

3. 將https://localhost添加到它的設置中，如屏幕截圖：

   

4. 現在關閉所有 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瀏覽器：

1. 要在 Internet Explorer 中禁用 cors 策略，請轉到internet option > security > Internet並取消選中啟用保護模式。

2. 然后單擊自定義級別並在雜項下啟用跨域訪問數據源，如下圖所示。 對internet option > security > Local intranet執行相同的過程。

   

希望它能解決你的問題。

Answer 2

問題來自后端，在我們的案例中是 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 3

問題來自您的 Vue 應用程序。

例如：您正在請求以下網址：

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

后端將其重定向到：

https://example.com/api/methods

當心末尾的斜杠。

Answer 4

問題出在服務器端。 如果您使用的是 express js。 嘗試在您的服務器上安裝 express cors 包。

 npm install cors

在你的 app.js 中需要 cors。

 var cors = require('cors')

然后，將其作為中間件添加到您的應用程序中。

 app.use(cors())

安裝軟件包后，您不應遇到 cors 問題。

Answer 5

我得到了解決方案，我已經改變了API的端點

before i call like this:

http://localhost:8080/api/create/

now, i just remove the shash '/'

http://localhost:8080/api/create 

它正在我的生產服務器上運行

Answer 6

cors（跨域資源共享）由服務器端處理。 如果您來自 laravel 端，那么barryvdh/laravel-cors包有助於解決此錯誤

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

Answer 7

如果您將其用作 axios 請求的基本 url，我們可以使用 APP_URL 進行修復。 請確保您的瀏覽器根 url 和 .env 中的 APP_URL 都相同。

例如，如果您在“ http://127.0.0.1:8000 ”上運行應用程序，那么應該是 APP_URL= http://127.0.0.1:8000

如果您在“ http://localhost:8000 ”上運行應用程序，那么應該是 APP_URL= http://localhost:8000

希望，這會有所幫助！ 它已經用 laravel6.x 測試過

Answer 8

您可能在 Web 服務器端或 Laravel 端有一些配置錯誤。 也許這個解決方案可以幫助你： 為什么我的 nginx web 服務器不處理 ttf 字體？ .

請密切注意OPTIONS方法，因為它可以支持預檢。

Answer 9

我正在設置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 10

禁用此標志對我有用：chrome://flags/#block-insecure-private-network-requests

Answer 11

nelmio_cors: 默認值: allow_origin: [" "] allow_headers: [" "] allow_methods: ["POST", "PUT", "GET", "DELETE", "OPTIONS"] max_age: 3600 origin_regex: 錯誤路徑: '^/ ': ~ 添加 nelmio_cors /packge/nelmio_cors

Answer 12

腳步

1. Go 到此鏈接https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

2. 下載它

3. 打開 chrome web 瀏覽器擴展

4. 檢查您的 http 鏈接

5. 例如遠程 url 的 http 到 https。 做得到 api。