詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)

更新時(shí)間：2018年02月09日 16:27:12 作者：Maldivee

這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問題小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

什么是跨域？

同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。

跨域的解決方式有哪幾種？

1.JSONP 是 JSON with padding（填充式 JSON 或參數(shù)式 JSON）的簡(jiǎn)寫。

JSONP實(shí)現(xiàn)跨域請(qǐng)求的原理簡(jiǎn)單的說，就是動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，然后利用<script>的src 不受同源策略約束來跨域獲取數(shù)據(jù)。

JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)。
動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，設(shè)置其src，回調(diào)函數(shù)在src中設(shè)置：

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

在頁(yè)面中，返回的JSON作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。

function handleResponse(response){
  // 對(duì)response數(shù)據(jù)進(jìn)行操作代碼
  console.log(response)
}

JSONP目前還是比較流行的跨域方式，雖然JSONP使用起來方便，但是也存在一些問題：

首先， JSONP 是從其他域中加載代碼執(zhí)行。如果其他域不安全，很可能會(huì)在響應(yīng)中夾帶一些惡意代碼，而此時(shí)除了完全放棄 JSONP 調(diào)用之外，沒有辦法追究。因此在使用不是你自己運(yùn)維的 Web 服務(wù)時(shí)，一定得保證它安全可靠。

JSONP 具有直接訪問響應(yīng)文本的優(yōu)點(diǎn)，但是要想確認(rèn) JSONP 是否請(qǐng)求失敗并不容易，因?yàn)?script 標(biāo)簽的 onerror 事件還未得到瀏覽器廣泛的支持，此外它僅能支持 GET 方式調(diào)用。

2.cros跨域

整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺。

因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

一個(gè)常用的完整的跨域頭：

let express=require("express");
let app=express();
app.use(function(req,res,next){
 //如果在webpack里配置了代理，那么這些響應(yīng)頭都不要了
 //只允許8080訪問
  res.header('Access-Control-Allow-Origin','http://localhost:8080');

 //服務(wù)允許客戶端發(fā)的方法
 res.header('Access-Control-Allow-Methods','GET,POST,DELETE,PUT');
 //服務(wù)器允許的請(qǐng)求頭
 res.header('Access-Control-Allow-Headers','Content-Type,Accept');
 //跨域攜帶cookie 允許客戶端把cookie發(fā)過來
 res.header('Access-Control-Allow-Credentials','true');
 //如果請(qǐng)求的方法是OPTIONS,那么意味著客戶端只要響應(yīng)頭，直接結(jié)束響應(yīng)即可
 if(req.method == 'OPTIONS'){
  res.end();
 }else{
  next();
 }
});
app.listen(3000);

3.hash + iframe

4.postMessage

5.WebSockets

后臺(tái)只給我接口，不能修改后臺(tái)，怎么跨域？

在實(shí)際工作中，前后端配合并不是那么默契，如果后臺(tái)只給我接口，不能修改后臺(tái)，怎么跨域？
在vue項(xiàng)目和react項(xiàng)目中的config文件中，都有一個(gè)proxy代理設(shè)置，這個(gè)就是用來在開發(fā)環(huán)境下進(jìn)行跨域的。對(duì)其進(jìn)行設(shè)置就能實(shí)現(xiàn)跨域。

通過vue-cli腳手架搭建出來的項(xiàng)目,修改config文件夾下的index.js中的proxyTable就能實(shí)現(xiàn)：

module.exports = {
 dev: {
  env: {
   NODE_ENV: '"development"'
  },
  //proxy

  // 只能在開發(fā)環(huán)境中進(jìn)行跨域，上線了要進(jìn)行反向代理nginx設(shè)置
   proxyTable: {
    //這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add'即可
   '/api': {
     target: 'http://news.baidu.com',//你要跨域的網(wǎng)址 比如 'http://news.baidu.com',
    secure: true, // 如果是https接口，需要配置這個(gè)參數(shù)
    changeOrigin: true,//這個(gè)參數(shù)是用來回避跨站問題的，配置完之后發(fā)請(qǐng)求時(shí)會(huì)自動(dòng)修改http header里面的host，但是不會(huì)修改別的
    pathRewrite: {
     '^/api': '/api'//路徑的替換規(guī)則
     //這里的配置是正則表達(dá)式，以/api開頭的將會(huì)被用用‘/api'替換掉，假如后臺(tái)文檔的接口是 /api/list/xxx
     //前端api接口寫：axios.get('/api/list/xxx') ， 被處理之后實(shí)際訪問的是：http://news.baidu.com/api/list/xxx
    }
   }
  },

讓我們用本地起的服務(wù)來測(cè)試一下如何跨域 demo

0.用vue-cli搭建的腳手架，npm run dev 前端端口號(hào)一般是：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.自己寫一個(gè)后臺(tái)，使用express+node.js ，不設(shè)置任何跨域頭，代碼如下：

注意自己需要在當(dāng)前文件夾下提前準(zhǔn)備一個(gè)list.json的文件，用來讀取數(shù)據(jù)，返回?cái)?shù)據(jù)。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) { //用來讀取數(shù)據(jù)的，注意自己在mock文件夾下準(zhǔn)備一些數(shù)據(jù)
 fs.readFile('./list.json','utf8',function (err,data) {
  if(err || data.length === 0){
   cb([]); // 如果有錯(cuò)誤 或者文件沒長(zhǎng)度 就是空數(shù)組
  }else{
   cb(JSON.parse(data)); // 將讀出來的內(nèi)容轉(zhuǎn)化成對(duì)象
  }
 })
}
//write
function write(data,cb) { // 寫入內(nèi)容
 fs.writeFile('./list.json',JSON.stringify(data),cb)
}
// 注意 沒有設(shè)置跨域頭
app.get('/api/list',function (req,res) {
 res.json(list);
});
app.listen(8000,()=>{
 console.log('8000 is ok');
});

3.前端調(diào)取的api代碼：

import axios from 'axios';
 axios.interceptors.response.use((res)=>{
 return res.data; // 在這里統(tǒng)一攔截結(jié)果 把結(jié)果處理成res.data
});
export function getLists() {
  return axios.get('/api/list');
}

4.在組件中進(jìn)行跨域調(diào)取接口，打印數(shù)據(jù)

隨便在一個(gè)文件中引入api測(cè)試一下打印出來接口返回的數(shù)據(jù)

import {getLists} from '../../api/index'
 export default {
  async created(){
   let dataList=await getLists();
   console.log(dataList,"我請(qǐng)求的數(shù)據(jù)");
  },

5.查看控制臺(tái)，打印出數(shù)據(jù)，沒有保錯(cuò)，代表跨域成功，代理服務(wù)成功