国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lidashuang / 2104人閱讀

摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。

什么是跨域？

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

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

JSONP實(shí)現(xiàn)跨域請求的原理簡單的說，就是動(dòng)態(tài)創(chuàng)建

在實(shí)際工作中，前后端配合并不是那么默契，如果后臺(tái)只給我接口，不能修改后臺(tái)，怎么跨域？
在vue項(xiàng)目和react項(xiàng)目中的config文件中，都有一個(gè)proxy代理設(shè)置，這個(gè)就是用來在開發(fā)環(huán)境下進(jìn)行跨域的。對其進(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ā)請求時(shí)會(huì)自動(dòng)修改http header里面的host，但是不會(huì)修改別的
        pathRewrite: {
          "^/api": "/api"http://路徑的替換規(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ù)來測試一下如何跨域 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ò)誤 或者文件沒長度 就是空數(shù)組
    }else{
      cb(JSON.parse(data)); // 將讀出來的內(nèi)容轉(zhuǎn)化成對象
    }
  })
}
//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測試一下 打印出來接口返回的數(shù)據(jù)
import {getLists} from "../../api/index"
  export default {
    async created(){
      let dataList=await getLists();
      console.log(dataList,"我請求的數(shù)據(jù)");
    },
5.查看控制臺(tái)，打印出數(shù)據(jù)，沒有保錯(cuò)，代表跨域成功，代理服務(wù)成功


開發(fā)環(huán)境成功跨域了，上線怎么辦？ 
上線要進(jìn)行nginx反向代理設(shè)置，同時(shí)應(yīng)區(qū)分環(huán)境變量，具體設(shè)置請看圖片：

歡迎更多補(bǔ)充，交流

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107351.html

相關(guān)文章

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

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來時(shí)應(yīng)該在頁面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    張金寶 評論0 收藏0

  • Node +MongoDB 搭建后臺(tái)的全過程

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

    voidking 評論0 收藏0

  • vue-cli配置proxyTable 跨域請求

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

    caoym 評論0 收藏0

  • vue-cli本地環(huán)境API代理設(shè)置和解決跨域

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

    lakeside 評論0 收藏0

發(fā)表評論

0條評論

lidashuang

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<