web-dev-qa-db-ja.com

「XMLHttpRequestへのアクセスがCORSポリシーによってブロックされました」修正方法

enter image description hereenter image description here 私はlaravelとvuejsを設定しています。

laravelおよびフロントエンド側のCORSプラグインは、Axiosを使用してREST apiを呼び出します

originから ' https：//xx.xxxx.xx 'にあるXMLHttpRequestへのこのERROR Accessを取得しました ' http：// localhost：808 'が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"));
    });
  }

エラーが発生するのは、1つのルートが残りすべてが機能しているだけです。 Postmanにも取り組んでいます

javascriptlaravelvue.jsvuejs2
7
priyeshvadhiya

私たちの場合、バックエンド側からの問題は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');
1
Ali Mohammed

Cors（Cross-Origin Resource Sharing）はサーバー側で処理します。 laravel endから来ている場合は、barryvdh/laravel-corsパッケージがこのエラーの解決に役立ちます

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

1
Sublime Laravel Dev

おそらく、Webサーバー側またはLaravel側のいずれかで構成が間違っています。おそらく、この解決策が役立つかもしれません： なぜ私のnginx Webサーバーはttfフォントを処理しないのですか？ 。

OPTIONSメソッドには注意が必要です。これにより、プリフライトのサポートが有効になります。

0
mllnd

APP_URLをaxiosリクエストのベースURLとして使用する場合、これを修正できます。ブラウザのルートURLと.envのAPP_URLが両方とも同じであることを確認してください。

たとえば、「 http://127.0.0.1:80 」でアプリを実行する場合、APP_URL = http://127.0.0.1:80 である必要があります

そして、「 http：// localhost：80 」でアプリを実行する場合、APP_URL = http：// localhost：80 になるはずです。

これが役立つことを願っています！そして、それはlaravel6.xでテストされています

0
tanvir993