iT邦幫忙

0

網頁前端與後端網址

  • 分享至 

  • xImage

前輩們大家好
最近自己在嘗試寫網站
使用golang的gin + vue spa的方式
有個問題是
如果domain name改變
vue網頁(前端)中的圖片、grqhql等有要向後端發送需求該如何動態變更?
後端是直接給vue build出來的html + js 檔案
不是用html template

router.StaticFS("/", http.Dir("./www"))

測試都是用localhost:port的方式
今天如果使用者把localhost:port改成了自己的domain,類似wordpress的方式
https://ithelp.ithome.com.tw/upload/images/20190705/20111977JmKNNqBm3h.png

或是有其它方式可以給關鍵字
另外想問,spa對SEO會有差別嗎?
spa也是提供site-map的吧?

先謝謝前輩們的解答

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2019-07-05 10:49:59 檢舉
好奇問一下

不是都抓localhost嗎

domain會有影響嗎?

還是我誤解了什麼?
Alfred iT邦新手 5 級 ‧ 2019-07-05 10:59:28 檢舉
我也不知道,網頁出去後
網頁的img src就不能是localhost
要改成是domain name才能渲染出來
dragonH iT邦超人 5 級 ‧ 2019-07-05 11:04:26 檢舉
我覺得要看一下

你的 img src的寫法

然後看 img 在瀏覽器的請求url與結果

最後在看一下你 develop 跟 production 的 url 長怎樣
Alfred iT邦新手 5 級 ‧ 2019-07-05 11:08:16 檢舉
html:
<img :src="firstsettingaddress">

script:
data() {
return{
firstsettingaddress: 'http://localhost:8080/images/default/logo.png',
}
}
這樣圖片才show的出來
我是不是搞錯了什麼?
還是這是後端的問題?
dragonH iT邦超人 5 級 ‧ 2019-07-05 11:08:59 檢舉
話說你的 domain name 並沒有提到 port

是有特別去用 reverse proxy 嗎
dragonH iT邦超人 5 級 ‧ 2019-07-05 11:11:16 檢舉
show不出來時 是怎麼寫的呢

瀏覽器request 的結果是 404嗎

然後你的front end 跟 back end 應該是分離的吧

port 號分別是什麼呢
咖咖拉 iT邦好手 1 級 ‧ 2019-07-05 11:18:26 檢舉
不知道這樣可不可以

script:
data() {
return{
firstsettingaddress: 'images/default/logo.png',
}
}

一般web伺服器會自己抓前面網址 就不用多打了
真的需要指定網域 前端也可以寫的JS變數來應付
froce iT邦大師 1 級 ‧ 2019-07-05 11:20:54 檢舉
http的link只要打"/"開頭,就會自動幫你變成"domain/"

EX: <img src="/path/to/link.jpg">,實際上瀏覽器會連到 http://domain/path/to/link.jpg
Alfred iT邦新手 5 級 ‧ 2019-07-05 11:23:22 檢舉
原來是這樣…
謝謝前輩們的指導
剛剛跨入前端…不太懂
dragonH iT邦超人 5 級 ‧ 2019-07-05 11:27:43 檢舉


所以只是這個問題喔

我還以為是遇到cors之類的問題哩

我以為正常來說

應該是用 nginx 放 vue 的 page (port 80)

然後一個後端server (port xxxx)

最後再用 nginx 之類的做 reverse proxy 之類的
Alfred iT邦新手 5 級 ‧ 2019-07-05 11:34:36 檢舉
小小新手一次這麼複雜的架構可能無法
dragonH iT邦超人 5 級 ‧ 2019-07-05 11:43:11 檢舉
沒有餒

除非你的後端是直接寫在 vue cli 的那個 dev-server

不然正常來說都會遇到cors的問題
Alfred iT邦新手 5 級 ‧ 2019-07-05 11:51:48 檢舉
那可能我還沒遇到QQ
小魚 iT邦大師 1 級 ‧ 2019-07-05 13:56:00 檢舉
看樣子已經有人回答了,
串場一下.
froce iT邦大師 1 級 ‧ 2019-07-05 14:26:48 檢舉
因為他大概也是用go去做靜態檔案的伺服器,所以我才會這樣回啦。
用go可以做到不需要nginx的地步,但是重點是安全性你要自己顧...
Alfred iT邦新手 5 級 ‧ 2019-07-05 16:52:56 檢舉
我打算嘗試用caddy,但目前進度還沒到那邊
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2019-07-05 14:47:30
最佳解答

其實,初學者常常有127.0.0.1或localhost的迷思問題。
首先,一般預設locahost,實際上就是指向到127.0.0.1這個ip

我這邊再大約說明一下。
認真來說,正常來講,一個ip大多都是指向一台主機為主。
基本觀念這樣是沒錯。

但只有127.0.0.1這個ip的特性不一樣。它並非是指定某一台主機。它永遠都是代表在這台機器上跑。

依網路流程來說,一個對外公開的外部ip而言。其對應路徑為
ip請求 => 網際網路對應設備 => 檢查機器 => 對應ip機器回應
就算你是這台機器直接打這台機器的ip跑。也是會先往外網際網路繞一圈回來這台機器上

但127.0.0.1這個ip則是不一樣。他的流程是
ip請求 => 與目前請求的機器回應

講白一點,就算你今天將網路線給拔掉。ping 127.0.0.1也一定可以ping的過的。

回來正題。當一個url連結是用localhost做連結時。同樣的連結如
http://localhost/test.jpg

在a機器上,是會請求a機器的test.jpg。
在b機器上,則是請求b機器的test.jpg

而正統的ip指向如 http://123.123.123.132/test.jpg
在a機器上則是會請求 123.123.123.123 這台機器上的test.jpg。
在b機器上則是會請求 123.123.123.123 這台機器上的test.jpg。
是否發現後面請求的東西是同樣了。

Alfred iT邦新手 5 級 ‧ 2019-07-05 16:53:41 檢舉

謝謝前輩的指導

我要發表回答

立即登入回答