利用Nginx處理Vue開(kāi)發(fā)環(huán)境的跨域的方法
更新時(shí)間：2019年06月05日 08:53:39 作者：dailybird
這篇文章主要介紹了利用Nginx處理Vue開(kāi)發(fā)環(huán)境的跨域的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1. 需求
本地測(cè)試域名與線(xiàn)上域名相同，以便正確傳遞 Cookie 和進(jìn)行 SSO 測(cè)試。
注：由于 SSO 登錄后，相關(guān) Cookie 被加在四級(jí)域名上，因而需要做到本地測(cè)試域名和線(xiàn)上接口域名相同。
2. 方案
配置 Host 文件使線(xiàn)上域名指向 Localhost：
127.0.0.1 product.xxx.xxx.com
配置 Nginx 進(jìn)行對(duì)應(yīng)轉(zhuǎn)發(fā)：
server {
listen 80;
listen [::]:80;
server_name ${product.xxx.xxx.com};
location /api {
proxy_pass https://${ip.ip.ip.ip};
proxy_set_header Host $host;
}
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
}
}
配置 vue.config.js 以免出現(xiàn) Invalid Host header 報(bào)錯(cuò)：
{
devServer: {
disableHostCheck: true
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
阿里云國(guó)際版使用Nginx作為HTTPS轉(zhuǎn)發(fā)代理服務(wù)器的處理方法
本文介紹了使用NGINX作為HTTPS流量轉(zhuǎn)發(fā)代理的兩種方法。它總結(jié)了NGINX使用HTTP?CONNECT隧道和NGINX流充當(dāng)HTTPS轉(zhuǎn)發(fā)代理的解決方案的原則，環(huán)境構(gòu)建要求，應(yīng)用場(chǎng)景和關(guān)鍵問(wèn)題2022-05-05
Nginx Rewrite使用場(chǎng)景及配置方法解析
這篇文章主要介紹了Nginx Rewrite使用場(chǎng)景及配置方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Nginx 負(fù)載均衡是什么以及該如何配置，幫助大家更好的理解和使用Nginx服務(wù)器，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了Nginx配置SSL自簽名證書(shū)的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
nginx server_name對(duì)于正確配置虛擬主機(jī)非常重要,本文主要介紹了解析nginx server_name的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
WordPress中開(kāi)啟多站點(diǎn)支持及Nginx的重寫(xiě)規(guī)則配置
這篇文章主要介紹了WordPress中開(kāi)啟多站點(diǎn)支持及Nginx的重寫(xiě)規(guī)則配置方法,在同一個(gè)WordPress軟件中開(kāi)啟的多個(gè)站點(diǎn)如果需要綁定不同域名的話(huà)也可以使用WordPress MU Domain Mapping插件,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了如何本地安裝nginx及部署項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
將樹(shù)莓派轉(zhuǎn)身為強(qiáng)大的Web服務(wù)器如何使用Nginx和cpolar實(shí)現(xiàn)遠(yuǎn)程訪(fǎng)問(wèn)
這篇文章主要介紹了Nginx可視化管理工具結(jié)合cpolar實(shí)現(xiàn)遠(yuǎn)程訪(fǎng)問(wèn)內(nèi)網(wǎng)服務(wù),相比其他 Web 服務(wù)器，Nginx 的內(nèi)存占用率非常低，可以在樹(shù)莓派等資源受限的設(shè)備上運(yùn)行，同時(shí)結(jié)合cpolar 內(nèi)網(wǎng)穿透工具即可實(shí)現(xiàn)遠(yuǎn)程訪(fǎng)問(wèn)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了nginx rewrite功能使用,rewrite是Nginx服務(wù)器提供的一個(gè)重要基本功能，主要作用用來(lái)實(shí)現(xiàn)URL地址重寫(xiě)，需要的朋友可以參考下2022-05-05
nginx部署vue頁(yè)面白屏或刷新404問(wèn)題解決
最近部署vue項(xiàng)目后發(fā)現(xiàn)刷新頁(yè)面會(huì)404,本文就來(lái)介紹一下nginx部署vue頁(yè)面白屏或刷新404問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10