vue-cli 프로젝트 의 proxy Table 크로스 도 메 인 문제 요약

7140 단어 vue-cliproxyTable
무엇이 크로스 필드 입 니까?
같은 소스 정책 은 두 url 의 프로 토 콜,도 메 인 이름,포트 중 하나 가 다 르 면 크로스 소스 를 인정 하도록 규정 하고 있 습 니 다.
도 메 인 을 뛰 어 넘 는 해결 방식 은 몇 가지 가 있 습 니까?
1.JSONP 는 JSON with padding(충전 식 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 는 응답 텍스트 에 직접 접근 하 는 장점 이 있 지만 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 + iframe
4.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:80801.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 역방향 프 록 시 설정 을 하려 면 환경 변 수 를 구분 해 야 합 니 다.구체 적 인 설정 은 그림 을 보십시오.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기