利用Nginx處理Vue開發(fā)環(huán)境的跨域的方法
更新時(shí)間：2019年06月05日 08:53:39 作者：dailybird
這篇文章主要介紹了利用Nginx處理Vue開發(fā)環(huán)境的跨域的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1. 需求
本地測試域名與線上域名相同，以便正確傳遞 Cookie 和進(jìn)行 SSO 測試。
注：由于 SSO 登錄后，相關(guān) Cookie 被加在四級域名上，因而需要做到本地測試域名和線上接口域名相同。
2. 方案
配置 Host 文件使線上域名指向 Localhost：
127.0.0.1 product.xxx.xxx.com
配置 Nginx 進(jìn)行對應(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
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了nginx upstream六種方式分配小結(jié),包括輪詢、加權(quán)輪詢、IP哈希、公平輪詢、URL哈希和備份服務(wù)器,具有一定的參考價(jià)格,感興趣的可以了解一下2025-03-03
教你利用Nginx 服務(wù)搭建子域環(huán)境提升二維地圖加載性能的步驟
這篇文章主要介紹了利用 Nginx 服務(wù)搭建子域環(huán)境提升二維地圖加載性能，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-09-09
nginx-rtmp-module模塊實(shí)現(xiàn)視頻點(diǎn)播的示例代碼
本文主要介紹了nginx-rtmp-module模塊實(shí)現(xiàn)視頻點(diǎn)播,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
Nginx搭建負(fù)載均衡集群的實(shí)現(xiàn)
這篇文章主要介紹了Nginx搭建負(fù)載均衡集群的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
CentOS 7.3.1611編譯安裝Nginx1.10.3+MySQL5.7.16+PHP7.1.2
這篇文章主要介紹了CentOS 7.3.1611編譯安裝Nginx1.10.3+MySQL5.7.16+PHP7.1.2,需要的朋友可以參考下2018-01-01
本文主要介紹了Nginx如何配置加密證書訪問實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
今天在幫客戶配置nginx服務(wù)器的時(shí)候，對方需要支持apk ipa文件下載，這里簡單分享下，方便需要的朋友2014-03-03
Nginx高可用(主從、主主模式)的項(xiàng)目實(shí)踐
本文介紹了Nginx高可用性的兩種主要解決方案,主從架構(gòu)和主主架構(gòu),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
在項(xiàng)目開發(fā)過程中,總是離不開日志解析的工作,雖然有些時(shí)候覺得確實(shí)挺繁瑣的,但是靜下心來會(huì)發(fā)現(xiàn)有時(shí)候也是挺有趣的1件工作。 下面這篇文章主要介紹了使用MongoDB分析Nginx日志的方法,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
這篇文章主要為大家介紹了Nginx反向代理與負(fù)載均衡概念理解及模塊說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03