詳解vue-cli項目中的proxyTable跨域問題小結，vue-cliproxytable

詳解vue-cli項目中的proxyTable跨域問題小結，vue-cliproxytable

什麼是跨域？

同源策略規定了如果兩個 url 的協議、網域名稱、連接埠中有任何一個不等，就認定它們跨源了。

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

1.JSONP 是 JSON with padding（填充式 JSON 或參數式 JSON）的簡寫。

JSONP實現跨域請求的原理簡單的說，就是動態建立<script>標籤，然後利用<script>的src 不受同源策略約束來跨域擷取資料。

JSONP 由兩部分組成：回呼函數和資料。回呼函數是當響應到來時應該在頁面中調用的函數。回呼函數的名字一般是在請求中指定的。而資料就是傳入回呼函數中的 JSON 資料。
動態建立<script>標籤，設定其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  // 只能在開發環境中進行跨域，上線了要進行反向 Proxynginx設定   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'//路徑的替換規則     //這裡的配置是Regex，以/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));//readfunction read(cb) { //用來讀取資料的，注意自己在mock檔案夾下準備一些資料 fs.readFile('./list.json','utf8',function (err,data) {  if(err || data.length === 0){   cb([]); // 如果有錯誤 或者檔案沒長度 就是空數組  }else{   cb(JSON.parse(data)); // 將讀出來的內容轉化成對象  } })}//writefunction 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反向 Proxy設定，同時應區分環境變數，具體設定請看圖片：

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。