vue-cli 프로젝트 의 proxy Table 크로스 도 메 인 문제 요약
7140 단어 vue-cliproxyTable
같은 소스 정책 은 두 url 의 프로 토 콜,도 메 인 이름,포트 중 하나 가 다 르 면 크로스 소스 를 인정 하도록 규정 하고 있 습 니 다.
도 메 인 을 뛰 어 넘 는 해결 방식 은 몇 가지 가 있 습 니까?
1.JSONP 는 JSON with padding(충전 식 JSON 또는 매개 변수 식 JSON)의 약자 입 니 다.
JSONP 가 크로스 도 메 인 요청 을 실현 하 는 원 리 는 쉽게 말 하면 동적 으로
JSONP 는 두 부분 으로 구성 되 어 있다.
回调函数和数据
.리 셋 함 수 는 응답 이 왔 을 때 페이지 에서 호출 해 야 할 함수 입 니 다.리 셋 함수 의 이름 은 일반적으로 요청 에서 지정 합 니 다.데 이 터 는 리 셋 함수 에 들 어 오 는 JSON 데이터 다.동적 으로
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 는 응답 텍스트 에 직접 접근 하 는 장점 이 있 지만 JSONP 가 요청 에 실 패 했 는 지 확인 하 는 것 은 쉽 지 않 습 니 다.script 태그 의 onerror 이 벤트 는 브 라 우 저의 광범 위 한 지원 을 받 지 못 했 기 때문에 GET 방식 만 지원 할 수 있 습 니 다.
2.cros 크로스 필드
전체 CORS 통신 과정 은 브 라 우 저가 자동 으로 완성 되 므 로 사용자 가 참여 할 필요 가 없습니다.개발 자 에 게 CORS 통신 은 같은 소스 의 AJAX 통신 과 차이 가 없고 코드 가 똑 같 습 니 다.브 라 우 저 는 AJAX 가 크로스 소스 를 요청 하 는 것 을 발견 하면 자동 으로 추가 헤더 정 보 를 추가 하고,때로는 추가 요청 이 한 번 더 나 오기 도 하지만 사용 자 는 감각 이 없다.
따라서 CORS 통신 을 실현 하 는 관건 은 서버 다.서버 가 CORS 인 터 페 이 스 를 실현 하면 크로스 소스 통신 이 가능 하 다.
자주 사용 하 는 완전한 크로스 필드 헤드:
let express=require("express");
let app=express();
app.use(function(req,res,next){
//如果在webpack里配置了代理,那么这些响应头都不要了
//只允许8080访问
res.header('Access-Control-Allow-Origin','http://localhost:8080');
//服务允许客户端发的方法
res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT');
//服务器允许的请求头
res.header('Access-Control-Allow-Headers','Content-Type,Accept');
//跨域携带cookie 允许客户端把cookie发过来
res.header('Access-Control-Allow-Credentials','true');
//如果请求的方法是OPTIONS,那么意味着客户端只要响应头,直接结束响应即可
if(req.method == 'OPTIONS'){
res.end();
}else{
next();
}
});
app.listen(3000);
3.hash + iframe4.postMessage
5.WebSockets
백 엔 드 는 인터페이스 만 주 고 백 엔 드 를 수정 할 수 없습니다.어떻게 도 메 인 을 뛰 어 넘 습 니까?
실제 업무 에서 앞 뒤 가 잘 맞지 않 습 니 다.만약 에 배경 이 저 에 게 인터페이스 만 주 고 배경 을 수정 하지 못 하면 어떻게 도 메 인 을 뛰 어 넘 습 니까?
vue 프로젝트 와 react 프로젝트 의 config 파일 에는 proxy 프 록 시 설정 이 있 습 니 다.이것 은 개발 환경 에서 도 메 인 을 뛰 어 넘 는 데 사 용 됩 니 다.이 를 설정 하면 크로스 필드 를 실현 할 수 있다.
vue-cli 비 계 를 통 해 만들어 진 프로젝트 입 니 다.config 폴 더 에 있 는 index.js 의 proxy Table 을 수정 하면 다음 과 같 습 니 다.
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
}
}
},
로 컬 에서 시작 하 는 서비스 로 도 메 인 demo 를 어떻게 뛰 어 넘 는 지 테스트 합 시다.0.vue-cli 로 만 든 비계,
npm run dev
전단 포트 번 호 는 보통:http://localhost:8080
1.config 파일 의 index.jsproxyTable:{}
코드 를 수정 하고 바 꾸 면 됩 니 다.
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)
let express = require('express');
let app = express();
let fs = require('fs');
let list = require('./list');
let bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(express.static(__dirname));
//read
function read(cb) { //用来读取数据的,注意自己在mock文件夹下准备一些数据
fs.readFile('./list.json','utf8',function (err,data) {
if(err || data.length === 0){
cb([]); // 如果有错误 或者文件没长度 就是空数组
}else{
cb(JSON.parse(data)); // 将读出来的内容转化成对象
}
})
}
//write
function write(data,cb) { // 写入内容
fs.writeFile('./list.json',JSON.stringify(data),cb)
}
// 注意 没有设置跨域头
app.get('/api/list',function (req,res) {
res.json(list);
});
app.listen(8000,()=>{
console.log('8000 is ok');
});
3.전단 에서 가 져 온 api 코드:
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 역방향 프 록 시 설정 을 하려 면 환경 변 수 를 구분 해 야 합 니 다.구체 적 인 설정 은 그림 을 보십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다. (모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음) 결론, 비교적 간단하게...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.