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

張金寶發布于2019-07-25 14:10 / 1174人閱讀

摘要：由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽，設置其，回調函數在中設置在頁面中，返回的作為參數傳入回調函數中，我們通過回調函數來來操作數據。

什么是跨域？

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

跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with padding（填充式 JSON 或參數式 JSON）的簡寫。

JSONP實現跨域請求的原理簡單的說，就是動態創建

在實際工作中，前后端配合并不是那么默契，如果后臺只給我接口，不能修改后臺，怎么跨域？
在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"http://路徑的替換規則
          //這里的配置是正則表達式，以/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反向代理設置，同時應區分環境變量，具體設置請看圖片：

歡迎更多補充，交流

云服務器 GPU云服務器跨域問題 cdn跨域問題 javascript跨域問題 js跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/39793.html

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

摘要：由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽，設置其，回調函數在中設置在頁面中，返回的作為參數傳入回調函數中，我們通過回調函數來來操作數據。什么是跨域？同源策略規定了如果兩個 url 的協議、域名、端口中有任何一個不等，就認定它們跨源了。跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

lidashuang 2019-08-26 11:40 評論0 收藏0
Node +MongoDB 搭建后臺的全過程

摘要：搭建后臺的全過程近期基于搭建前端項目，搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正是非關系型數據庫。是用來啟動的，是的命令行客戶端。 Node + mongoDB 搭建后臺的全過程近期基于 vue-cil 搭建前端項目， express + mongoose 搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正^?_?^！ mong...

voidking 2019-06-26 17:47 評論0 收藏0
vue-cli配置proxyTable 跨域請求

摘要：本地服務啟動端口，項目啟動端口，當前端用戶提交登錄信息到后端，便產生跨域，可以配置解決跨域問題一進入項目下的文件，添加接口的域名如果是接口，需要配置這個參數如果接口跨域，需要進行這個參數配置此處的設為二在前端發送請求頁面，設置請求三啟動本地express服務啟動端口3000， vue-cli項目啟動端口8080，當前端用戶提交登錄信息到后端，便產生跨域，可以配置 proxyTab...

caoym 2019-08-23 17:00 評論0 收藏0
vue-cli本地環境API代理設置和解決跨域

摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個參數是否跨域需要的之后不管是生產環境，還是開發環境，都不用再修改我們的請求地址了。前言我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了，通常我們的請求地址是以localhost:8080來請求接口數據的，localhost是沒有辦法設置cookie的。我們可以...

lakeside 2019-08-20 19:09 評論0 收藏0