클 라 이언 트(vue 프레임 워 크)와 서버(koa 프레임 워 크)통신 및 서버 크로스 도 메 인 설정 상세 설명

본 블 로그 의 주요 설명:
앞 뒤 엔 드 프레임 워 크(이 예 는 vue 와 koa)는 어떻게 요청 을 보 냅 니까?응답 가 져 오기?
그리고 크로스 도 메 인 문 제 는 어떻게 해결 합 니까?

vue 부분:

import App from './App.vue'
import Axios from 'axios'
new Vue({
  el: '#app',
  render: h => h(App),
  mounted(){
    Axios({
      method: 'get',
      url: 'http://localhost:3000',
    }).then((response) => {
    console.log(response);
    })
  }
})

koa 부분:

const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
const main = ctx => {
  ctx.response.body = 'Hello World';
};
app.use(cors());
app.use(main);
app.listen(3000);
console.log("     ");

구덩이 모음:
1.단순히 koa 프레임 워 크 를 도입 하고 서 비 스 를 시작 하면 크로스 오 류 를 발생

XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080';; is therefore not allowed access.
bundle.js:1200 Uncaught (in promise) Error: Network Error
  at createError (bundle.js:1200)
  at XMLHttpRequest.handleError (bundle.js:1046)

2.도 메 인 간 프로젝트 시도
① cors 모듈 도입(실패,Type Error:res.setHeader 는 함수 가 아 닙 니 다)

const cors = require('cors');
app.use(cors());

② koa-cors 모듈 도입(성공,크로스 도 메 인 문 제 를 해결 하고 데 이 터 를 정확하게 되 돌려 줍 니 다)

const cors = require('koa-cors');
app.use(cors())

이 때 새로운 http response 의 머리 정보 에 2 개의 필드 가 추 가 됩 니 다.
Access-Control-Allow-Methods:GET,HEAD,PUT,POST,DELETEAccess-Control-Allow-Origin:http://localhost:8080

이제 우 리 는 지역 간 의 실패 와 성공 의 심층 적 인 원인 이 무엇 인지 거시적 으로 분석 해 보 자.
클 라 이언 트(http://localhost:8080）
서버:(http://localhost:3000）
크로스 도 메 인 요청 실패 가 누구의 원인 입 니까?
서버 의 원인.
왜 그 랬 어 요?
서버 에서 koa-cors 를 도입 하기 전에 서버 쪽 이 므 로 도 메 인 접근 이 실 패 했 습 니 다.
서버 가 크로스 도 메 인 요청 모듈 인 koa-cors 를 도입 한 후에 클 라 이언 트 는 아무런 변화 도 하지 않 았 고 크로스 도 메 인 방문 에 성공 했다.
구체 적 으로 돌아 오 는 요청 헤더 에 도 메 인 요청 필드 2 개 를 추가 한 것 으로 위의 글 에서 도 상세 한 HTTP 정 의 를 내 렸 다.
지원 하 는 요청 방법 을 대표 합 니 다.이 예 는 get 방법 입 니 다.
상기 방법 을 사용 할 수 있 는 도 메 인 을 대표 합 니 다.이 예 는?http://localhost:8080。
1.그렇게 똑똑 한 당신 은 물 어 볼 것 입 니 다.koa-cors 는 본질 적 으로 node 모듈 입 니 다.이 모듈 은 어떻게 도 메 인 접근 을 지원 합 니까?
koa-cors 는 node 모듈 http 를 호출 했 을 것 이 라 고 생각 합 니 다.나머지 모듈 은 아직 알 수 없습니다.
2.그렇게 똑똑 한 당신 은 또'axios'의 내부 작업 원 리 는 무엇 입 니까?
분명히 사 용 된 XMLHttpRequest 라 는 대상 은 XMR 대상 을 바탕 으로 봉인 을 했 습 니 다.이렇게 많은 것 을 알 고 있 습 니 다.
3.그 러 니까 똑똑 한 당신 에 게 깨 달 음 이 있 을 거 야!
node 모듈 은 서버 에서 만 호출 할 수 있 는 것 이 아니 라 클 라 이언 트 에서 도 호출 할 수 있 습 니 다.
한 가지 분명하게 말하자면 node 모듈 은 node.js 엔진 의 api 를 봉인 할 수 있 을 뿐만 아니 라 웹 V8 엔진 의 api 를 봉인 할 수 있다.
이 유 를 묻 고 싶다 면 node 는 V8y 엔진 을 기반 으로 개발 한 서버 환경 이기 때문에 v8 api 는 기본적으로 통용 되 고 일시 적 으로 이렇게 이해 합 니 다.
그 러 니까 전단 개발 모듈 화 프로 그래 밍 추세 에서 nodejs 는 반드시 해 야 한다.왜냐하면 두 사람 은 모두 강력 한 V8 엔진 구동 하에 서 일 하기 때문이다.
마지막 으로 미시적 인 구 덩이 를...
다음 코드 에서 app.use(cors();app.use(main)에 있어 야 합 니 다.전에

const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
const main = ctx => {
  ctx.response.body = 'Hello World';
};
app.use(cors());
app.use(main);
app.listen(3000);
console.log("     ");

별말:
선배 와 점심 을 먹 는 과정 에서 웹 키 트,gecko,v8,모 바 일 브 라 우 저 와 데스크 톱 브 라 우 저의 차 이 를 논의 했다.
주로 몇 가 지 를 요약 한다.
1.v8 은 webkit 의 js 엔진 이 고 Gecko 는 자신의 js 엔진 을 가지 고 있다.
2.PC 단 과 모 바 일 단,웹 키 단 으로 통일 적 으로 이해 하면 됩 니 다.
safari 와 chrome 은 모두 webkit 커 널 이기 때문에 safari 는 애플 폰 이 고 chrome 은 안 드 로 이 드 폰 과 유사 할 수 있 습 니 다.
이 를 통 해 안 드 로 이 드 폰 과 애플 폰 자체 브 라 우 저 는 모두 웹 키 트 커 널 로 추정 된다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.