'XMLHttpRequest has blocked by CORS policy' 수정 방법 리다이렉트에서는 1개의 루트만 사용할 수 없습니다.

'XMLHttpRequest has blocked by CORS policy' 수정 방법 리다이렉트에서는 1개의 루트만 사용할 수 없습니다.

라라벨과 부에즈를 세팅하고 있어요

라라벨 및 프런트 엔드 사이드용 CORS 플러그인은 Axios를 사용하여 REST api를 호출합니다.

다음 오류 발신기지 'http://localhost:8080'에서 'https://xxx.xx.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"));
    });
  }

이 에러는, 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-security --disable-features = Crossite Document Blocking IfIf Isolating

   명령어가 올바르게 실행되면 다음 스크린샷과 같은 알림이 나타납니다.

   

   알림을 볼 수 없는 경우 명령이 작동하지 않습니다.따라서 명령어로 지정된 디렉토리 링크를 확인하여 chrome.exe 파일이 해당 디렉토리 링크에 존재하는지 확인해야 합니다.를 찾으면chrome.exe그런 다음 크롬 브라우저를 닫은 후 백그라운드에서 실행 중인 다른 크롬 서비스가 있는지 태스크 매니저를 확인해야 합니다.모든 서비스를 닫은 후 명령어는 예상대로 작동합니다.

Internet Explorer:

1. Internet Explorer에서 Cors 정책을 비활성화하려면 다음 페이지로 이동하십시오.internet option > security > Internet[ enable protected mode ]체크박스를 끄겠습니다

2. 그런 다음 사용자 지정 수준을 클릭하고 아래 이미지와 같이 기타에서 도메인 전체에 걸쳐 데이터 원본 액세스를 활성화합니다.동일한 프로세스를 수행합니다.internet option > security > Local intranet.

   

그게 너의 문제를 해결해 주길 바라.

이 문제는 Larabel의 경우 백엔드 측에서 발생합니다.이 경우 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');

문제는 Vue App에서 발생합니다.

예: 아래 URL을 요청합니다.

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

백엔드는 다음 주소로 리다이렉트합니다.

https://example.com/api/methods

마지막에는 후행 슬래시를 끄집어내지 마세요.

서버 측에서 문제가 발생.express js를 사용하는 경우.Express cors 패키지를 서버에 인스톨 해 보겠습니다.

npm install cors

당신의 앱에서는 cors가 필요합니다.

var cors = require('cors')

그런 다음, 앱에 미들웨어로 추가합니다.

app.use(cors())

패키지 설치 후 Cors 문제가 발생하지 않습니다.

APP_URL을 axios 요청의 기본 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

호프, 이게 도움이 될 거야!그리고 라라벨 6.x로 테스트했습니다.

Cors(Cross-Origin Resource Sharing)는 서버별로 처리합니다.laravel 엔드에서 온 경우 barryvdh/laravel-cors 패키지가 이 오류를 해결하는 데 도움이 됩니다.

URL : https://packagist.org/packages/barryvdh/laravel-cors

웹 서버 측 또는 Larabel 측 설정이 잘못되었을 수 있습니다.이 솔루션이 도움이 될 수 있습니다.nginx 웹 서버가 ttf 글꼴을 처리하지 않는 이유는 무엇입니까?

살펴보세요.OPTIONSpreflight 메서드

chrome://flags/#block-insecure-private-network-requests라는 플래그를 비활성화하면 문제가 없습니다.

nelmio_cors:
    defaults:
        allow_origin: ["*"]
        allow_headers: ["*"]
        allow_methods: ["POST", "PUT", "GET", "DELETE", "OPTIONS"]
        max_age: 3600
        origin_regex: false
    paths:
        '^/': ~

nelmio_packge/nelmio_params 추가

순서

1. 이 링크에 접속합니다.https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

2. 다운로드하다

3. 크롬 웹 브라우저 확장 기능을 켜다

4. http 링크를 확인합니다.

5. example http to https of remote url. get api를 실행합니다.

언급URL : https://stackoverflow.com/questions/54212220/how-to-fix-access-to-xmlhttprequest-has-been-blocked-by-cors-policy-redirect-i