vue에서 호출 축척이 네트워크 오류를 얻습니다.

Question

하나의 작은 프로젝트에서 작업하고 있습니다. 서버 측은 Python에서 RESTFul 서버로 인식했습니다. 프런트 엔드 Vue와 함께 해보겠습니다. 나는 Vue에서 새로운 사람입니다. 그리고 내가 데이터를 가져 오려고하면 오류 : 네트워크 오류이 발생합니다. 그리고 나는 실수를 발견 할 수 없다.

아이러니하게도 브라우저에서 네트워크 -> 응답 탭에 가져온 데이터가 표시됩니다. HTML 페이지에는 없습니다. 페이지에서 나는 오류 : 네트워크 오류 만 볼 수 있습니다.

브라우저로 직접 URL을 통해 데이터를 가져올 수 있습니다. CURL로 데이터를 가져올 수 있습니다 또한 3 부 서비스에서이 Vue 코드로 데이터를 가져올 수 있습니다! 하지만 로컬 URL이 아닙니다.

플라스크 서버 코드

@app.route('/', methods=['GET']) 
def get_data_list(): 
    return 'Test' 

VUE 코드

var app = new Vue({ 
    el: '#app', 
    data: { 
     data_list: '...', 
     url_A: "#home", 
     url_B: '#page2', 
     url_C: '#settings' 
    }, 

    created: function() { 
     this.loadData() 
    }, 

    methods: 
     { 
      loadData: function() { 
       this.data_list = "Loading...." 
       var app = this 
       axios.get('http://127.0.0.1:5000/') 
        .then(function (response) { 
         app.data_list = response.data[0] 
        }) 
        .catch(function (error) { 
         app.data_list = "An error occurred. "+error+"/Error ststus: "+error.response 
        }) 
      } 
     } 
}) 

나는 조금 혼란 스러워요. 내 코드에 어떤 문제가 있습니까?

Answer 1

당신은이 오류가 있는지 언급이 :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 127.0.0.1:5000. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

이렇게하면 CORS (교차 리소스 공유)를 의미합니다. 즉, 두 개의 다른 도메인/포트에서 요청을 보내거나 수신하려고합니다.

그래서이 문제를 해결하는 한 가지 방법은 다음과 같습니다 당신이 localhost:5000에 localhost:8080에서 GET 요청을 보내는 경우 서로 다른 기원을 통해 자원을 공유하려고하기 때문에

그래서, 예를 들어, 당신은 같은 오류가 발생합니다 백엔드 서버 (127.0.0.1:5000)에게 (127.0.0.1:8080)의 GET 요청을 보낼 수있는 플라스크 앱을 실행한다고 가정합니다.

그래서, http://flask-cors.readthedocs.io/en/latest/