Vue Axios CORS 정책:'액세스 제어-허용-발신원' 없음

Vue Axios CORS 정책:'액세스 제어-허용-발신원' 없음

앱 use vue와 코드 시그니터를 만들었는데 api를 얻으려고 하면 문제가 발생하여 콘솔에 이 오류가 표시됨

Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-origin is not allowed 
by Access-Control-Allow-Headers in preflight response.

프런트엔드에서 이렇게 시도하고 있습니다(main.js).

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

백엔드(컨트롤러)에 있는 것

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

및 vue 로그인 방법

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

stackoverflow에서 검색 및 시도했지만 작동하지 않습니다. 어떻게 하면 해결할 수 있을까요? 도움을 주셔서 감사합니다.

CORS는 클라이언트가 어떤 종류의 HTTP 요구를 작성할 수 있는지를 클라이언트에 통지하는 서버입니다.언제든지 볼 수 있습니다.Access-Control-Allow-*header, 이것들은 클라이언트가 아닌 서버에서 송신해야 합니다.서버가 클라이언트가 특정 헤더의 송신을 "허용"하고 있습니다.고객이 스스로 허가를 내주는 것은 말이 안 된다.프런트 엔드 코드에서 이 헤더를 삭제합니다.

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          // remove headers
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

예를 들어, 백엔드가 이 cors 헤더를 설정했다고 가정합니다.

header("Access-Control-Allow-Methods: GET");

즉, 다른 발신기지로부터의 클라이언트는 GET 요구만을 송신할 수 있습니다.axios.get효과가 있을 것이다.axios.post실패한다,axios.delete실패하는 등

이 문제는 다른 호스트에 전화를 걸려고 할 때 발생할 수 있습니다.: localhost: 8080에서 실행 중이지만 백엔드 API는 http://localhost: 88888 이 아닌 localhost: 8080/project/login을 찾는 액티오 요청입니다.

이 문제를 해결하려면 vue 앱에서 프록시를 생성해야 합니다.

루트 폴더에 js 파일 vue.config.js 또는 webpack.config.js가 아직 없는 경우 다음 절차를 따릅니다.

이하를 포함하다

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

복수의 백엔드가 필요한 경우는, 이하를 사용해 주세요.

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },
        
    }
}

엔드 포인트 앞에 있는 두 번째 것을 선택한 경우 V1 또는 V2 ex를 사용합니다.호스트에 따라 엔드 포인트가 V1/project/login 또는 V2/project/login을 사용하기 전에 엔드 포인트가 /project/login이 됩니다.

이 Vue 프로젝트 확인 - https://github.com/ashanoulu/helsinki_city_bike_app/tree/main/Front_End/app-view 버전 - Vue 3

자세한 내용은 Vue 공식 매뉴얼을 참조하십시오.

내 경우 curl & postman은 동작하지만 vue axios.post은 동작하지 않습니다.

오리진 'http://%%%:9200/lead/search'에서 'http://%%%%.local'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 요청 헤더 필드 access-Control-allow-origin은 전송 전 응답에서 Access-Control-Headers에 의해 허용되지 않습니다.

따라서 문제는 서버가 아니라 vue 쪽에 있습니다.

서버 응답에 "access-control-allow-origin: *" 헤더가 포함되어 있습니다.

서버 쪽도 문제없었는데도 같은 문제가 있었어요.

문제의 해결방법은 제가 누른 API 링크가 마지막에 슬래시(/)를 놓쳤기 때문에 CORS 오류가 발생하였습니다.

제 경우, 이것을 php 백엔드 API 함수에 추가하는 것이 효과가 있었습니다.

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
        header("Access-Control-Max-Age", "3600");
        header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        header("Access-Control-Allow-Credentials", "true");

다음을 시도해 보십시오.

백엔드에서

1. npm 설치 코르스

2. 그런 다음 backend app.backend에서 다음을 추가합니다.

   const cors = 필수')

   app.use(오리지널 오리진: ['filen://localhost:8082', })

도움이 됐으면 좋겠네요

Dev Proxy가 솔루션

DevProxy에서는 노드(서버가 vue-cli dev 서버를 실행)가 트래픽을 라우팅하는 특정 경로 또는 와일드카드(비정적)를 정의합니다.

후( 「」( 「」)의)vue.config.jsUI(같은 호스트 및 포트)와 같은 URI를 사용하여 API를 호출하면 Vue는 적절한 CORS 헤더를 제공하면서 API 서버로 요청을 리다이렉트합니다.

자세한 것은, https://cli.vuejs.org/config/#devserver-displays 를 참조해 주세요.

Vue.js에서 앱을 빌드하고 main.js 파일에 글로벌 헤더를 추가했습니다.

예:

axios.defaults.headers.get['header-name'] = 'value'

CORS 문제에 대처하기 위해서는 서버만의 문제가 아니라 클라이언트측에서 변경을 가해야 할 경우가 있습니다.

Chrome에는 몇 가지 플러그인이 있습니다.https://chrome.google.com/webstore/search/cors?hl=en

경우에 따라서는 vue 문제가 아닙니다.가끔은 뒷문제도 있고..내 경우 nest JS에서 API를 만들었지만 CORS = true를 활성화하지 않았습니다.그래서 CORS 정책 오류가 발생하고 있습니다.

제 경우 API는 CORS 정책을 반환하지만 문제는 제 URL에 있습니다.

제 전화는 "https://api.com//call" 이었고, 여분의 슬래시가 문제의 원인이었습니다.

URL을 "https://api.com/call"로 변경하면 오류가 수정되었습니다.

언급URL : https://stackoverflow.com/questions/55883984/vue-axios-cors-policy-no-access-control-allow-origin