国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 編程 > JavaScript > 正文

vue項(xiàng)目打包后怎樣優(yōu)雅的解決跨域

2019-11-19 11:28:23
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

前言

在使用vue.js開(kāi)發(fā)前端項(xiàng)目時(shí),再結(jié)合webpack搞起各種依賴、各種插件進(jìn)行開(kāi)發(fā),無(wú)疑給前端開(kāi)發(fā)帶來(lái)了很多便捷,就在解決跨域這個(gè)問(wèn)題上,相信眾多用vue.js的前端同僚們同我一樣嘗到了甜頭,開(kāi)發(fā)環(huán)境全靠proxyTable一通配置簡(jiǎn)直不要太酸爽。還不明所以然的新手們可能還沒(méi)搞清我說(shuō)的是什么,就是下面這幾行配置:

proxyTable: {   '/api': {    target: 'http://113.113.113.113:5000', //假的接口地址哈    changeOrigin: true,    pathRewrite: {     '^/api': ''    }   },

我們的跨域竟然就這樣完美的解決了,然后就開(kāi)始愉快的請(qǐng)求后端的接口啦!!

回到正題

具體場(chǎng)景:公司的一個(gè)h5項(xiàng)目是部署在客戶端的,但是部署后出現(xiàn)bug了,由于多人協(xié)同開(kāi)發(fā)且趕進(jìn)度竟然是打包后因?yàn)镃SS的問(wèn)題多個(gè)頁(yè)面布局亂了,但是開(kāi)發(fā)環(huán)境并沒(méi)有問(wèn)題啊,怎么打完包樣式就亂了?那就打開(kāi)dist下的index.html看看唄,復(fù)現(xiàn)一下bug,想都不用想,頁(yè)面沒(méi)數(shù)據(jù)怎么復(fù)現(xiàn),再去造一套假數(shù)據(jù)?作為一個(gè)不喜歡這樣折騰的人必然是不想做這種事情的。

就不勞煩后端了,咱自己解決!

nginx 還是要會(huì)一些些的,自己配置一下,分分鐘解決,哈哈!

server {    listen    8082;    server_name 127.0.0.1; //咱自己nginx服務(wù)器地址    #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/; //后端接口地址      //關(guān)鍵部分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';      //關(guān)鍵部分end      //以下配置參見(jiàn)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 間接允許一下跨域請(qǐng)求!

start nginx //在nginx目錄啟動(dòng)服務(wù)

通常我們會(huì)做一個(gè)統(tǒng)一的管理接口的js文件,如下形式

var BASE_URL = '/api';var isPro = process.env.NODE_ENV === 'production'if(isPro){ BASE_URL= 'http://113.113.113.113:5000', //線上或者測(cè)試地址 //BASE_URL= 'http://127.0.0.1:8020', //nginx代理地址 //當(dāng)我們需要打包后依然能正常調(diào)接口的時(shí)候用這個(gè)  }const UrlConfig = { getToken:BASE_URL + "某接口"}export default { UrlConfig};

至此,就把打包后接口跨域的問(wèn)題優(yōu)雅的解決啦。

結(jié)語(yǔ)

因?yàn)楣镜那昂蠖隧?xiàng)目通常都放在同一臺(tái)服務(wù)器,或者不在同一臺(tái)服務(wù)器的時(shí)候跨域也是靠后端的同志們?nèi)ソ鉀Q的,所以很少在生產(chǎn)環(huán)境中靠前端解決跨域的這項(xiàng)需求。不過(guò)我分享的這個(gè)小技巧也只適用于以上類似場(chǎng)景中,歸根結(jié)底還是要在多人協(xié)同開(kāi)發(fā)的過(guò)程中提前規(guī)劃好公共以及個(gè)人的編程規(guī)范,盡量保證開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境是一致的,就可以擺脫很多類似的問(wèn)題。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 石城县| 洪雅县| 武功县| 辉县市| 班戈县| 桐梓县| 保定市| 理塘县| 通州区| 哈尔滨市| 资阳市| 大同市| 乌拉特中旗| 恩平市| 梅州市| 钟祥市| 永修县| 正定县| 万载县| 海晏县| 内江市| 嘉善县| 沧州市| 兴仁县| 阿勒泰市| 榆树市| 桐乡市| 西和县| 安宁市| 美姑县| 青冈县| 荥阳市| 揭西县| 罗甸县| 宁安市| 仲巴县| 杭锦旗| 项城市| 永登县| 玉田县| 从江县|