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

이 글은 주로 vue-cli 프로젝트의 ProxyTable 크로스 도메인 문제에 대한 자세한 요약을 소개하고 있습니다.

교차 도메인이란 무엇인가요?

동일 출처 정책은 두 URL의 프로토콜, 도메인 이름, 포트 중 하나라도 다를 경우 교차 출처로 간주한다고 규정합니다.

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

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

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

JSONP는 콜백 함수와 데이터의 두 부분으로 구성됩니다. 콜백 함수는 응답이 올 때 페이지에서 호출되어야 하는 함수입니다. 콜백 함수의 이름은 일반적으로 요청에 지정됩니다. 데이터는 콜백 함수에 전달된 JSON 데이터입니다.
동적으로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 생성하고 src를 설정하고 src에 콜백 함수를 설정합니다. 回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
动态创建3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，设置其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 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

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中的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
    }
   }
  },

让我们用本地起的服务来测试一下如何跨域 demo

0.用vue-cli搭建的脚手架，npm run dev 前端端口号一般是：http://localhost:8080

1.修改config文件中的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)

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');
});

페이지에서 반환된 JSON이 매개변수로 콜백 함수에 전달되고 우리는 콜백을 사용합니다. 데이터를 조작하는 함수입니다.

import axios from 'axios';
 axios.interceptors.response.use((res)=>{
 return res.data; // 在这里统一拦截结果 把结果处理成res.data
});
export function getLists() {
  return axios.get('/api/list');
}

JSONP는 여전히 널리 사용되는 도메인 간 방법입니다. JSONP는 사용하기 편리하지만 몇 가지 문제도 있습니다.

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

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

2.cros cross-domain

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

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

일반적으로 사용되는 완전한 크로스 도메인 헤더:

import {getLists} from '../../api/index'
 export default {
  async created(){
   let dataList=await getLists();
   console.log(dataList,"我请求的数据");
  },

3.hash + iframe

4.postMessage

5.WebSockets

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

로컬 서비스를 사용하여 교차 도메인 데모 사용 방법을 테스트해 보겠습니다🎜

0. vue-cli로 구축된 스캐폴딩, npm run dev 프런트 엔드 포트 번호는 일반적으로 http://localhost:8080입니다. 🎜🎜 1. 구성 파일에서 index.js proxyTable:{} 코드를 수정하고 교체합니다. 🎜rrreee🎜 2. 백엔드를 직접 작성하고, express+node.js를 사용하고, 다음을 사용하지 마세요. Cross-domain 헤더를 무엇이든 설정하면 코드는 다음과 같습니다. 🎜🎜데이터를 읽고 데이터를 반환하려면 현재 폴더에 list.json 파일을 미리 준비해야 합니다. fs.readFile('./list.json','utf8',cb)🎜🎜🎜🎜rrreee🎜3. 프런트 엔드에서 호출되는 API 코드: 🎜rrreee🎜4. 인터페이스, 데이터 인쇄 🎜🎜 인터페이스에서 반환된 데이터를 테스트하려면 파일에 API를 도입하기만 하면 됩니다 🎜rrreee 🎜 5. 콘솔을 확인하고 데이터를 인쇄합니다. 오류 보장이 없으며 교차 도메인이 성공했음을 의미합니다. 프록시 서비스 성공 🎜🎜🎜🎜 🎜🎜🎜🎜🎜🎜개발 환경이 크로스 도메인으로 성공적으로 전환되었습니다. 온라인으로 전환되면 어떻게 해야 하나요? 🎜🎜🎜🎜🎜🎜온라인에 접속할 때 nginx 역방향 프록시를 설정해야 하며, 구체적인 설정은 그림을 참조하세요. 🎜🎜🎜

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Node.js에서 readline 모듈과 util 모듈을 사용하는 방법

Immutable.js에서 실행 취소 및 다시 실행 기능을 구현하는 방법(자세한 튜토리얼)

다음에는 여러 바인딩이 있습니다. vue 변수 값을 확인하고 변경되지 않도록 방지(자세한 튜토리얼)

위 내용은 vue-cli 프로젝트의 ProxyTable과 관련된 도메인 간 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!