vue項目打包后怎樣優(yōu)雅的解決跨域
前言
在使用vue.js開發(fā)前端項目時，再結(jié)合webpack搞起各種依賴、各種插件進行開發(fā)，無疑給前端開發(fā)帶來了很多便捷，就在解決跨域這個問題上，相信眾多用vue.js的前端同僚們同我一樣嘗到了甜頭，開發(fā)環(huán)境全靠proxyTable一通配置簡直不要太酸爽。還不明所以然的新手們可能還沒搞清我說的是什么，就是下面這幾行配置:
proxyTable: {
'/api': {
target: 'http://113.113.113.113:5000', //假的接口地址哈
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
我們的跨域竟然就這樣完美的解決了，然后就開始愉快的請求后端的接口啦?。?/p>
回到正題
具體場景：公司的一個h5項目是部署在客戶端的，但是部署后出現(xiàn)bug了，由于多人協(xié)同開發(fā)且趕進度竟然是打包后因為CSS的問題多個頁面布局亂了，但是開發(fā)環(huán)境并沒有問題啊，怎么打完包樣式就亂了？那就打開dist下的index.html看看唄，復現(xiàn)一下bug，想都不用想，頁面沒數(shù)據(jù)怎么復現(xiàn)，再去造一套假數(shù)據(jù)？作為一個不喜歡這樣折騰的人必然是不想做這種事情的。
就不勞煩后端了，咱自己解決！
nginx 還是要會一些些的，自己配置一下，分分鐘解決，哈哈！
server {
listen 8082;
server_name 127.0.0.1; //咱自己nginx服務器地址
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /app-api {
rewrite ^.+app-api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://113.113.113.113:5001/; //后端接口地址
//關鍵部分start
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
//關鍵部分end
//以下配置參見nginx配置文檔哈
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Connection close;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_max_temp_file_size 0;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
}
目的是把后端接口用 nginx 再代理一遍，咱自己用 nginx 間接允許一下跨域請求！
start nginx //在nginx目錄啟動服務
通常我們會做一個統(tǒng)一的管理接口的js文件，如下形式
var BASE_URL = '/api';
var isPro = process.env.NODE_ENV === 'production'
if(isPro){
BASE_URL= 'http://113.113.113.113:5000', //線上或者測試地址
//BASE_URL= 'http://127.0.0.1:8020', //nginx代理地址
//當我們需要打包后依然能正常調(diào)接口的時候用這個
}
const UrlConfig = {
getToken:BASE_URL + "某接口"
}
export default {
UrlConfig
};
至此，就把打包后接口跨域的問題優(yōu)雅的解決啦。
結(jié)語
因為公司的前后端項目通常都放在同一臺服務器，或者不在同一臺服務器的時候跨域也是靠后端的同志們?nèi)ソ鉀Q的，所以很少在生產(chǎn)環(huán)境中靠前端解決跨域的這項需求。不過我分享的這個小技巧也只適用于以上類似場景中，歸根結(jié)底還是要在多人協(xié)同開發(fā)的過程中提前規(guī)劃好公共以及個人的編程規(guī)范，盡量保證開發(fā)環(huán)境和生產(chǎn)環(huán)境是一致的，就可以擺脫很多類似的問題。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 使用rules對表單字段進行校驗的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
使用vue-router與v-if實現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
Element-Plus Select組件實現(xiàn)滾動分頁加載功能
Element-Plus的select組件并沒有自帶滾動分頁加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁及下一頁操作按鈕的方式進行分頁加載切換,這篇文章主要介紹了Element-Plus Select組件實現(xiàn)滾動分頁加載功能,需要的朋友可以參考下2024-03-03
Vue使用moment將GMT時間轉(zhuǎn)換為北京時間
GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是兩個時間標準,它們在許多方面非常相似,但也有一些微小的差異,本文給大家詳細介紹了Vue使用moment將GMT時間轉(zhuǎn)換為北京時間,需要的朋友可以參考下2023-12-12
vue百度地圖通過地址名稱獲取地址的經(jīng)緯度gps問題(具體步驟)
在Vue項目中，可以通過使用百度地圖JavaScript?API來實現(xiàn)根據(jù)地址名稱獲取經(jīng)緯度GPS的功能，本文分步驟給大家詳細講解vue百度地圖獲取經(jīng)緯度的實例，感興趣的朋友一起看看吧2023-05-05
vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式
這篇文章主要介紹了vue-cli3訪問public文件夾靜態(tài)資源報錯的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能
這篇文章主要介紹了Vue拖拽組件列表實現(xiàn)動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue實現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過使用Vue組件來實現(xiàn)對表格的增刪改查操作,下面將介紹一些基礎的Vue組件和技術來實現(xiàn)對表格的增刪改查操作,需要的朋友可以參考下2024-08-08
當容器有滾動條時,有時需要將滾動條滑到某個位置,下面這篇文章主要給大家介紹了關于vue控制滾動條滑到某個位置的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
組件是vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用,這篇文章主要給大家介紹了關于Vue3的10種組件通信方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03