vue-cli 프로젝트의 ProxyTable과 관련된 도메인 간 문제

크로스도메인이란 무엇인가요?

동일 출처 정책은 두 URL의 프로토콜, 도메인 이름, 포트 중 하나라도 다를 경우 교차 출처로 간주한다고 규정합니다. 이번 글은 주로 vue-cli 프로젝트의 ProxyTable 크로스 도메인 문제를 요약하여 소개하는 글입니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

교차 도메인 솔루션이란 무엇입니까?

1.JSONP는 패딩이 있는 JSON(패딩된 JSON 또는 매개변수화된 JSON)의 약어입니다.

교차 도메인 요청을 구현하는 JSONP의 원칙은 단순히 태그를 동적으로 생성한 다음 의 src를 사용하여 동일 출처 정책의 적용을 받지 않고 교차 도메인 데이터를 얻는 것입니다.

JSONP는 콜백 함수와 데이터라는 두 부분으로 구성됩니다. 콜백 함수는 응답이 올 때 페이지에서 호출되어야 하는 함수입니다. 콜백 함수의 이름은 일반적으로 요청에 지정됩니다. 데이터는 콜백 함수에 전달된 JSON 데이터입니다. 동적으로 태그를 생성하고 src를 설정하고 src에 콜백 함수를 설정합니다.

var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); 페이지에서 반환된 JSON이 콜백 함수에 매개변수로 전달되고 콜백 함수를 사용하여 작동합니다. 데이터.

function handleResponse(response){ // 对response数据进行操作代码 console.log(response) } JSONP는 여전히 널리 사용되는 도메인 간 방법입니다. JSONP는 사용하기 편리하지만 몇 가지 문제도 있습니다.

먼저 JSONP는 실행을 위해 다른 도메인에서 코드를 로드합니다. 다른 도메인이 안전하지 않은 경우 일부 악성 코드가 응답에 몰래 들어갈 가능성이 높으며 JSONP 호출을 완전히 포기하는 것 외에는 이를 추적할 수 있는 방법이 없습니다. 그러므로, 스스로 운영, 유지 관리하지 않는 웹 서비스를 이용하는 경우에는 그 서비스가 안전하고 신뢰할 수 있는지 확인해야 합니다.

JSONP는 응답 텍스트에 직접 접근할 수 있다는 장점이 있지만 스크립트 태그의 onerror 이벤트는 브라우저에서 널리 지원되지 않았고 GET 호출만 지원하기 때문에 JSONP 요청의 실패 여부를 확인하기가 쉽지 않습니다. .

2.cros cross-domain

전체 CORS 통신 프로세스는 브라우저에 의해 자동으로 완료되며 사용자 참여가 필요하지 않습니다. 개발자의 경우 동일한 소스의 CORS 통신과 AJAX 통신 간에 차이가 없으며 코드도 완전히 동일합니다. 브라우저가 AJAX 요청이 교차 출처임을 발견하면 자동으로 추가 헤더 정보를 추가하고 때로는 추가 요청이 이루어지지만 사용자는 이를 느끼지 못할 것입니다.

그러므로 CORS 통신을 이루기 위한 핵심은 서버입니다. 서버가 CORS 인터페이스를 구현하는 한 Cross-Origin 통신이 가능합니다.

일반적으로 사용되는 전체 도메인 간 헤더:

4.postMessage

5.WebSockets

배경은 인터페이스만 제공하고 배경을 수정할 수는 없습니다.

실제 작업에서 프런트엔드와 백엔드 협력은 그다지 암묵적이지 않습니다. 백엔드가 인터페이스만 제공하고 백엔드를 수정할 수 없다면 어떻게 도메인을 넘나들 수 있나요? vue 프로젝트와 React 프로젝트의 구성 파일에는 개발 환경에서 크로스 도메인에 사용되는 프록시 설정이 있습니다. 이를 설정하면 교차 도메인이 활성화됩니다. vue-cli 스캐폴딩을 통해 구축된 프로젝트는 config 폴더에 있는 index.js의 ProxyTable을 수정하여 실현할 수 있습니다.

module.exports = { dev: { env: { NODE_ENV: '"development"' }, //proxy // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com', secure: true, // 如果是https接口，需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的 pathRewrite: { '^/api': '/api'//路径的替换规则 //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx } } }, 로컬 서비스를 사용하여 도메인 간 데모 사용 방법을 테스트해 보겠습니다

0. vue-cli로 구축된 스캐폴딩에서 npm run dev 프런트엔드 포트 번호는 일반적으로 http://localhost:8080

1입니다. 구성 파일에서 index.js ProxyTable:{} 코드를 수정하고 바꿉니다. ：

module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8000', secure: true, changeOrigin: true, pathRewrite: { '^/api': '/api' } } }, 2 직접 백엔드를 작성하고, express+node.js를 사용하고, 도메인 간 헤더를 설정하지 마세요. 코드는 다음과 같습니다.

현재 목록에서 list.json 파일을 준비해야 합니다. 데이터 가져오기 및 반환 데이터를 읽기 위해 미리 폴더를 만듭니다. fs.readFile('./list.json','utf8',cb)

import axios from 'axios'; axios.interceptors.response.use((res)=>{ return res.data; // 在这里统一拦截结果 把结果处理成res.data }); export function getLists() { return axios.get('/api/list'); } 4. 구성 요소에서 인터페이스 교차 도메인을 호출하고 인쇄합니다. 데이터

파일에 API를 도입하고 인쇄된 인터페이스에서 반환된 데이터를 테스트하세요

import {getLists} from '../../api/index' export default { async created(){ let dataList=await getLists(); console.log(dataList,"我请求的数据"); }, 5. 콘솔을 확인하고 데이터를 인쇄하세요. 오류가 보장되지 않습니다. 이는 도메인 간 성공을 의미합니다. 프록시 서비스 성공

크로도메인 개발 환경이 성공적으로 진행되었는데 온라인이 되면 어떻게 해야 하나요?

온라인에 접속할 때 nginx 역방향 프록시를 설정해야 하며, 환경 변수를 구별해야 합니다. 구체적인 설정은 그림을 참조하세요.