解決前端收到的response是undefined的問題

最近在開專案的時候遇到一個問題,明明後端有回傳資料到前端,到Network也有看到response的資料,但是實際接收到的資料卻是undefined。

原因

後端如果直接回傳純文字的話

會判斷為 text/plain

而不是 application/json

以下範例為Java Spring的範例程式,前端接收到會是text,非JSON:

@RestController
public class TestController
{
@RequestMapping("/getString")
public String getString()
{
return "Hello World";
}
}

解決方法

以下介紹兩種解決方式

  1. 在後端定義好種類

範例:

@RequestMapping(value = "/getString", method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)

如果專案有用到Node作為API的中介層,那麼這個方法會是一種解法

在中間定義種類為JSON

function callPost(url, body, res) {  const promise = fetch(url, {    method: 'POST',    headers: {      'Content-Type': 'application/json; charset=utf-8',    },    body: typeof body === 'object' ? JSON.stringify(body) : body  });  return promise;}


我在參加六角學院舉辦的鼠年鐵人賽的時候,寫了一系列的SEO文章

有需要的人可以多參考這些文章,不管你是有沒有寫過程式的人

都歡迎多參考了解SEO的各種相關經驗哦

如果有什麼建議或是想了解的部分,也歡迎提供:

如何加強網站的SEO — 基礎篇

如何加強網站的SEO — 進階篇

如何加強網站的SEO — SSR與CSR篇

如何加強網站的SEO — 同構篇

如何加強網站的SEO — 框架篇


講到常用的資料結構,一定會想到Array和LinkedList,但是一旦被問到他們的差別或是實際如何去應用時,很多人便會無法以實際的例子來詮釋,特別是在面試的時候。

兩者主要差異

以下是我整理出比較常見的差異

  1. Array是index based的結構,LinkedList則是Reference based。
  2. Array會存在sequential memory locations,LinkedList則是sequence of the elements,每一個element都會link下一個element。
  3. Array裡面會儲存同樣結構的資料,可以是Primitive Data Type或是Object Data Type,LinkedList裡面每個儲存的Object都會包含Data與Link。
  4. Array可以先宣告 …


隨著前端框架越來越成熟,舊版的網頁也逐漸被新技術給淘汰,但是如果產品的客戶群佔使用舊瀏覽器的用戶還是多數的話,真的要認真考慮是否要支援的議題了。

先前發表了關於判斷瀏覽器是否為IE/Edge的方式,有興趣可以參考

以下介紹的內容適用各個前端框架,這邊以React為例

小建議

  1. 大部分的網站已停用TLS1.0

2. 引導使用者安裝瀏覽器

有些使用者可能不太會用電腦,或是自己的電腦已經是古董級的,但是一直無限期的支援下去是沒有辦法的,所以我建議可以設計一些彈跳視窗引導使用者如何使用新瀏覽器,這樣也能提升產品的服務品質。

3. 目前已有不少套件支援舊版瀏覽器

儘管如此,使用上還是會有部分不支援的問題,所以在使用上需要特別注意

Edge對ES6的支援度

如果只看caniuse的話,會發現支援的程度其實蠻高的,但是神奇的是,我之前用React寫個簡單的Modal呈現在頁面,發現頁面竟然不會re-render,一打開console發現這段錯誤

unble to get property “includes” of undefined or null reference

修正Edge無法取得includes

  1. 我這邊使用在package.json內的dependencies加入
"@babel/polyfill": "^7.8.3"
npm install

React本身內建react-app-polyfill支援IE

事實上React本身就有支援這個套件,但是我在使用上的時候還是會遇到相容性的問題,因此我這邊是沒有使用到它。但是有想嘗試的話,也可以使用看看。

  1. 在package.json的browserslist補上ie 11(因開發環境而異)
"browserslist": ["not ie < 11","not op_mini all","ie 11"]
npm install react-app-polyfill
import 'react-app-polyfill/ie11' 
import 'react-app-polyfill/stable'

推薦的支援IE瀏覽器方法

這邊我推薦支援舊版IE瀏覽器的方法,使用babel-polyfill

首先請看官方網站的講解

React 16 依賴 MapSet 集合類型。如果你需要支援舊瀏覽器和設備,它們原生並沒有支援(例如 IE < 11)或是沒有兼容的實作(例如 IE 11),請考慮於應用程式加入一個全域的 polyfill,例如 core-jsbabel-polyfill

使用babel-polyfill的方式其實也很簡單,只要照著官方的步驟做

  1. 安裝
npm install --save @babel/polyfill
import '@babel/polyfill';

以@babel/polyfill的例子來說,經過測試只解決了includes的問題

所以這邊我要再另外特別介紹支援Polyfills 的 Fetch API:Unfetch

3. 安裝Fetch API

這是一個輕量又實用的套件,最低可以支援到IE8以上的版本

以下是截自作者的介紹


在撰寫網頁的時候,可能有些情境需要判斷使用者是使用哪些瀏覽器,並且做其他額外的動作。這裡將會介紹如何判斷。

另外可參考 如何搭配前端框架設計出支援IE/Edge的網頁

取得瀏覽器資訊

最簡單的方式就是使用

window.navigator.userAgent
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

瀏覽器的版本

以MicroSoft的產品來說,瀏覽器會因為版本的關係,而夾帶不同的字串

我這邊整理了一部份的資訊

IE<=10: MSIEIE>=11: Trident/Edge,  …


如何解決Google Chrome Helper (Rerender) 佔用大量資源的問題

你是否遇到Google Chrome Helper佔用大量的CPU和Memory的問題呢?如果你更新了chrome,依然佔用大量的資源,那麼你有可能是在更新的時候發生了Bug。

解決步驟

  1. 打開Terminal
  2. 輸入以下的指令
chroot /Volumes/Macintosh\ HD
rm -rf /Library/Google/GoogleSoftwareUpdate/GoogleSoftwareUpdate.bundle
mv var var_back
ln -sh private/var var
chflags -h restricted /var
chflags -h hidden /var
xattr -sw com.apple.rootless "" /var

參考資源

mac no longer boot


政府在2019/11發布消息表示,自明年2020起範圍將繼續擴大,三大重點,包括擴大補貼戶數至12萬戶、擴大補貼對象至20~40歲單身青年,以及擴大補貼標準。

擴大補貼的內容,包括擴大補貼戶數:從6萬戶增加到12萬戶;擴大補貼對象:納入20至40歲單身青年、新婚家庭、育有未成年子女家庭;擴大補貼標準:從最低生活費1.5倍,放寬到2.5倍。

詳細的2020年租屋補助消息,將於下次消息發布時,更新文章。

以下將介紹最近較多人申請的補助。

最近非常流行申請單身青年補貼,但是你知道青年跨域就業補助嗎?

當初之所以知道這個計畫,是因為剛好發現面試的公司也有申請這項計畫,才有這個機會研究,最後申請到資格。

如果是以職場新鮮人的身份去申請的話,和其他身份的人比較起來較容易申請到補助,補助的金額也不輸其他補助金計畫,對新鮮人來說非常的友善。

但是對很多人來說,這麼攏長的資料,相信很少人有耐心去看完。

因此以下我將分享申請青年跨域就業補助的經驗

首先,讓我們先初步認識 — 單身青年補貼 v.s. 青年跨域就業補助

單身青年補貼

申請時間

主要條件


以下將以React抓取wordpress的資料為例子,讓你知道如何解決跨網域存取遇到的問題。

In this topic, you will learn how to use JSONP to get data from WordPress on your React Project.

前言

在開發一些大型專案時,會運用同網域限制(Same origin policy)來保護資料傳輸的安全性問題。最常見的手法就是,在你的前端開一個Node.js API 專門與後端進行溝通,同時又能確保IP不被洩露的風險存在。

但是有時候專案上,會需要外部網域存取來完成你的需求。

例如:有一個專案要從WordPress的REST API拿資料,在自己的local測試是可行的,但是一旦Deploy到Lab,在Travis CI查看時 …


這邊以懶人包的形式讓大家更容易理解什麼是虛擬化技術

歷史

  • 早期的伺服器主要為一個實體機
  • 但是很大很肥很重

你印象中的機房

  • 裡面有很多櫃子放在那邊
  • 很帥!看過去一片都是機器海

你老闆眼中的機房

  • 都是錢啊!別燒太多
  • 需要控制機器的溫度,又要花錢!

小節

所以以前的科技業被視為是科技新貴,光是買那些機房就要花多少錢了。
一開始先談虛擬化的人是IBM。一日復一日,開始有人提倡希望讓窮人跟有錢人都能買IBM。

虛擬化的效益

  • 減少成本
  • 管理彈性高
  • 可用性高
  • 隨需急用
  • 維護時間短
  • 很潮(x

有連接網路就沒有安全性這回事

  • 如果你要安全,直接斷網
  • 用container不代表安全

反思他的缺點

  • 管理數量多
  • 複雜性更高
  • 與實體設備相容性

那我們需要它嗎

效益 > 缺點 的時候

如何模擬

  • 全虛擬化模擬
  • 例如:CPU / 硬碟 / 網路

虛擬化出現之前

  • 三台不同主機/伺服器分別運行三個作業系統和服務

虛擬化出現之後

  • 一台主機/伺服器能開三台虛擬機,同時運行三個作業系統和服務

但是模擬是會耗資源的

總是有人會想出辦法的

如何解決?

那就不要模擬呀!沒錯呀,不要懷疑!

大家開始思考,我到底要實體?還是虛擬?

三種主要虛擬化技術比較

  • 全虛擬化
  • 半虛擬化
  • 硬體輔助虛擬化

The paravirtualization spectrum


求職面試一直都是新鮮人的大哉問,這裡就來分享自己認為一位新鮮人需要具備的一些小技巧。下面將以軟體工程師為例子。

準備履歷

初次準備履歷的話,我建議你準備1~3頁即可。事實上準備履歷這件事情是沒有一定的標準答案的,但是內容寫得不多不少,絕對是最穩的走法。

如果你投遞的職缺比較熱門的話,當然是寫的快狠準最好。詳細的自我展現,到面試的時候再談即可,否則可能會有反效果。主要是因為過多的資訊對人資來說會有閱讀上的負擔,你也很難確保人資的閱讀方式是如你預料的。

面試的前測

當人資發現你的經歷可能是他們正在尋找的人才時,這個時候就會邀請你做online test 或是 phone interview

  1. online test

2. phone interview

phone interview的形式有很多種,有的是單純一問一答,有的是會要你開線上共編的online editor出題要你打出來,打完之後也會跟你討論題目等。我個人是蠻喜歡這種面試形式的,因為可以在初期互相面試交流。

Yang Yang

https://blog.yyisyou.tw/ — Web developer, Travel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store