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