vue-cli項目中的proxyTable跨域問題小結

什麼是跨域？

同源策略規定了若是兩個 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

   // 只能在開發環境中進行跨域，上線了要進行反向代理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');
});

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反向代理設置，同時應區分環境變量，具體設置請看圖片：

歡迎更多補充，交流