詳解vue-cli項(xiàng)目開(kāi)發(fā)/生產(chǎn)環(huán)境代理實(shí)現(xiàn)跨域請(qǐng)求
開(kāi)發(fā)環(huán)境中跨域
使用vue-cli創(chuàng)建的項(xiàng)目,開(kāi)發(fā)地址是localhost:8080,需要訪問(wèn)非本機(jī)上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之間的訪問(wèn),需要跨域才能正確請(qǐng)求??缬虻姆椒ê芏啵ǔ6夹枰笈_(tái)配置,不過(guò)vue-cli創(chuàng)建的項(xiàng)目,可以直接利用node.js代理服務(wù)器,通過(guò)修改vue proxyTable接口實(shí)現(xiàn)跨域請(qǐng)求。在vue-cli項(xiàng)目中的config文件夾下的index.js配置文件中,修改前的dev:
dev: { assetsSubDirectory: 'static', //靜態(tài)資源根目錄的子目錄static,也就是dist目錄下面的static assetsPublicPath: '/', //編譯發(fā)布的根目錄,可配置為資源服務(wù)器域名或 CDN 域名 proxyTable: {}, //proxyTable 代理的接口(可跨域) host: 'localhost', port: 8080, //dev-server的端口號(hào),可以自行更改 autoOpenBrowser: false, //是否自動(dòng)打開(kāi)瀏覽器 errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'cheap-module-eval-source-map', cacheBusting: true, cssSourceMap: true //默認(rèn)情況下,關(guān)閉 CSS Sourcemaps,因?yàn)槭褂孟鄬?duì)路徑會(huì)報(bào)錯(cuò) },
只要修改里面的proxyTable: {}
proxyTable: { '/cms': { //代理地址 target: 'http://192.168.0.112:8080', //需要代理的地址 changeOrigin: true, //是否跨域 secure: false, pathRewrite: { '^/cms': '/cms' //本身的接口地址沒(méi)有'/cms' 這種通用前綴,所以要rewrite,如果本身有則去掉(/cms等價(jià)于 www.xxx.com/cms) } } },
然后重啟項(xiàng)目npm run dev,請(qǐng)求數(shù)據(jù)時(shí)URL前加上“/cms”就可以跨域請(qǐng)求了
this.$axios.get('/cms/queryMaterial', {params: params}) .then((res) => { console.log(res); }).catch((err) => { console.log(err); })
訪問(wèn)接口若沒(méi)有安裝axios,則需要進(jìn)行安裝
1)安裝:npm install axios --save-dev
2)main.js中導(dǎo)入
import axios from 'axios';
//引入axios進(jìn)行地址訪問(wèn)
Vue.prototype.$axios = axios;
(注意:不使用use來(lái)使用該例,而是用prototype原型來(lái)使用)
1、參數(shù)proxyTable詳解:
vue-cli的config文件里的參數(shù):proxyTable,這個(gè)參數(shù)主要是一個(gè)地址映射表,你可以通過(guò)設(shè)置將復(fù)雜的url簡(jiǎn)化,例如我們要請(qǐng)求的地址是www.xxx.com/list/1,可以按照如下設(shè)置:
proxyTable: { '/list': { target: 'http://www.xxx.com', pathRewrite: { '^/list': '/list' } } }
這樣我們?cè)趯?xiě)url的時(shí)候,只用寫(xiě)成/list/1就可以代表www.xxx.com/list/1
那么又是如何解決跨域問(wèn)題的呢?其實(shí)在上面的'list'的參數(shù)里有一個(gè)changeOrigin參數(shù),接收一個(gè)布爾值,如果設(shè)置為true,那么本地會(huì)虛擬一個(gè)服務(wù)端接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求,這樣就不會(huì)有跨域問(wèn)題了,當(dāng)然這只適用于開(kāi)發(fā)環(huán)境。增加的代碼如下所示:
proxyTable: { '/list': { target: 'http://www.xxx.com', changeOrigin: true, pathRewrite: { '^/list': '/list' } } }
2、pathRewrite含義
用代理,首先你得有一個(gè)標(biāo)識(shí),告訴他你這個(gè)連接要用代理,不然的話,可能你的 html,css,js這些靜態(tài)資源都跑去代理。所以我們只要接口用代理,靜態(tài)文件用本地。'/list': {}, 就是告訴node,我接口只要是'/list'開(kāi)頭的才用代理。所以你的接口就要這么寫(xiě) /list/xx/xx,最后代理的路徑就是 http://xxx.xx.com/list/xx/xx??墒遣粚?duì)啊,我正確的接口路徑里面沒(méi)有/list啊,所以就需要 pathRewrite,用'^/list':'', 把'/list'去掉,這樣既能有正確標(biāo)識(shí),又能在請(qǐng)求接口的時(shí)候去掉list。當(dāng)然如果本身的接口中就有/list,那么就可以把pathRewrite這個(gè)參數(shù)去掉。
生產(chǎn)環(huán)境中跨域
1)設(shè)置nginx配置文件:
server { ... location /cms{ add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://192.168.0.112:8080/cms; } ... }
2)java后端配置跨域
if (method.equals("OPTIONS")) { response.setHeader("Access-Control-Allow-Headers", "accept, content-type"); response.setHeader("Access-Control-Allow-Method", "POST"); } response.setHeader("Access-Control-Allow-Origin", "*");
設(shè)置不同的接口地址
平常我們團(tuán)隊(duì)開(kāi)發(fā)時(shí)都在公司的局域網(wǎng)內(nèi),調(diào)用接口也是局域網(wǎng)內(nèi)部的,但是項(xiàng)目上線時(shí),請(qǐng)求接口是線上服務(wù)器端的,那么就有接口之間的來(lái)回切換問(wèn)題。
在使用vue-cli搭建項(xiàng)目以后,做相關(guān)配置就可以實(shí)現(xiàn),不用手動(dòng)更改接口路徑,也可以請(qǐng)求不同環(huán)境下的接口。
1、設(shè)置不同的接口地址
先找到以下文件/config/dev.env.js,/config/prod.env.js,可以看到dev.env.js里面內(nèi)容如下
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"' })
這是開(kāi)發(fā)環(huán)境的參數(shù)配置,然后我們可以再上面文件加入一行代碼,如下:這就是本地測(cè)試環(huán)境請(qǐng)求后臺(tái)接口的域名
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"http://192.168.0.112:8080"' })
然后找到prod.env.js文件,如下:
'use strict' module.exports = { NODE_ENV: '"production"' }
我們加入一行代碼,如下:這是我們上傳服務(wù)器以后,請(qǐng)求后臺(tái)接口的域名
'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"http://www.baidu.com/api"' }
2、在代碼中調(diào)用設(shè)置好的參數(shù):
比如我在本項(xiàng)目中重新封裝axios(api文件在/src/axios/request.js中),將配置好的接口地址作為baseURL拼接到接口路徑中,應(yīng)用參數(shù)部分如下:process.env.API_ROOT
最后重新啟動(dòng)項(xiàng)目就可以了,當(dāng)npm run dev的時(shí)候就運(yùn)行在生產(chǎn)環(huán)境,當(dāng)npm run build的時(shí)候就是正式的線上環(huán)境。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請(qǐng)求的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用
本篇文章主要介紹了詳解如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Vue項(xiàng)目首屏性能優(yōu)化組件實(shí)戰(zhàn)指南
Vue眾所周知是一個(gè)輕量級(jí)的框架,源碼僅僅為72.9KB,但是也有它自己的缺點(diǎn),就是首屏加載會(huì)比較慢,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目首屏性能優(yōu)化組件的相關(guān)資料,需要的朋友可以參考下2021-11-11vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間,以及vue時(shí)間戳 獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫(xiě)法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示
同大多數(shù)的前端框架一樣,先讀官網(wǎng)的使用方法。學(xué)會(huì)基本使用后,在實(shí)例中找到自己想要demo。拿過(guò)來(lái)改一改,一個(gè)echarts圖表就形成,畢竟人家做就是為了方便使用,這篇文章主要介紹了Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示2022-10-10