利用 Nginx 處理 Vue 開發(fā)環(huán)境的跨域

morgan 發(fā)布于2019-07-25 14:48 / 623人閱讀

摘要：需求本地測試域名與線上域名相同，以便正確傳遞和進(jìn)行測試。注由于登錄后，相關(guān)被加在四級域名上，因而需要做到本地測試域名和線上接口域名相同。方案配置文件使線上域名指向配置進(jìn)行對應(yīng)轉(zhuǎn)發(fā)配置以免出現(xiàn)報(bào)錯(cuò)

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
    }
}

GPU云服務(wù)器云服務(wù)器 nginx服務(wù)器跨域 nginx環(huán)境變量 Vue開發(fā) vue組件開發(fā)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/40472.html

相關(guān)文章

前端常見跨域解決方案（全）

摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當(dāng)前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。什么是跨域？跨域是指一個(gè)域下的文檔或腳本試圖去請求另一個(gè)域下的資源，這里跨域是廣義的。廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

canger 2019-07-25 15:04 評論0 收藏0
大話javascript 5期：跨域

摘要：同源策略所謂同源是指協(xié)議，域名，端口均相同。同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源。需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當(dāng)前頁。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統(tǒng)一資源定位符（URL）是用于完整地描述Internet上網(wǎng)頁和其他資源的地址的...

jzzlee 2019-08-23 16:42 評論0 收藏0
九種 “姿勢” 讓你徹底解決跨域問題

摘要：什么是跨域當(dāng)協(xié)議域名端口號(hào)，有一個(gè)或多個(gè)不同時(shí)，有希望可以訪問并獲取數(shù)據(jù)的現(xiàn)象稱為跨域訪問，同源策略限制下都是不支持跨域的。命名是隨意的，只要是符合一級域名與二級域名的關(guān)系即可，然后訪問。 showImg(https://segmentfault.com/img/remote/1460000018998493); 閱讀原文同源策略同源策略/SOP（Same origin pol...

charles_paul 2019-08-23 12:18 評論0 收藏0
那些年曾談起的跨域

摘要：在中，在不同的域名下面進(jìn)行數(shù)據(jù)交互，就會(huì)遇到跨域問題，說到跨域首先要從同源說起，瀏覽器為了提供一種安全的運(yùn)行環(huán)境，各個(gè)瀏覽器廠商協(xié)定使用同源策略。在上面說過是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源請求。對于前端開發(fā)來說跨域應(yīng)該是最不陌生的問題了，無論是開發(fā)過程中還是在面試過程中都是一個(gè)經(jīng)常遇到的一個(gè)問題，在開發(fā)過程中遇到這個(gè)問題的話一般都是找后端同學(xué)去解決...

galois 2019-08-23 18:13 評論0 收藏0
前端跨域資源請求： JSONP/CORS/反向代理

摘要：此時(shí)完成的跨域代理配置僅僅是在開發(fā)環(huán)境下生效，到了生產(chǎn)環(huán)境下如果是放到服務(wù)器上則還需要借助的反向代理來進(jìn)行跨域的代理?？缬?指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對 JavaScript 施加的安全限制。同源就是指域名，協(xié)議，端口均相同。兩個(gè)網(wǎng)域若域名、協(xié)議、端口任一不同則二者的通信就出現(xiàn)了跨域問題，前端的跨域問題普通存在于兩個(gè)階段，一個(gè)是開發(fā)環(huán)境...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0