亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

nanchen2251 / 2869人閱讀

摘要：結(jié)語(yǔ)因?yàn)楣镜那昂蠖隧?xiàng)目通常都放在同一臺(tái)服務(wù)器，或者不在同一臺(tái)服務(wù)器的時(shí)候跨域也是靠后端的同志們?nèi)ソ鉀Q的，所以很少在生產(chǎn)環(huán)境中靠前端解決跨域的這項(xiàng)需求。

前言

在使用vue.js開(kāi)發(fā)前端項(xiàng)目時(shí)，再結(jié)合webpack搞起各種依賴(lài)、各種插件進(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)目是部署在客戶(hù)端的，但是部署后出現(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è)小技巧也只適用于以上類(lèi)似場(chǎng)景中，歸根結(jié)底還是要在多人協(xié)同開(kāi)發(fā)的過(guò)程中提前規(guī)劃好公共以及個(gè)人的編程規(guī)范，盡量保證開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境是一致的，就可以擺脫很多類(lèi)似的問(wèn)題。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/40432.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

    simon_chen 評(píng)論0 收藏0

  • vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程

    摘要：前言是現(xiàn)階段很流行的前端框架，很多人通過(guò)官方文檔的學(xué)習(xí)，對(duì)的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程對(duì) 前言 vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎...

    curlyCheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<