跳到主要內容

發表文章

在送出 Ajax 時，將 cooke 值一並送出

在送出 Ajax 時，將 cookie 值一並送出 若 Ajax 送出的網址為相同 domain Ajax 會將瀏覽器的 Cookie 放在 header 的 Cookie 欄位以字串 "key1=value1; key2=value2; key3=value3" 的形式送出 若 Ajax 送出的網址為相不同 domain 預設行為不送 Cooke 這個 header。 若這種情況還是要送 cookie，則需要瀏覽器和伺服器互相配合 瀏覽器： 送 Ajax 時需要加入 withCredentials: true ，以使用 Axios 為例： axios.get('/someCorssOriginUrlIWantToSendCookie', { headers:{ withCredentials: true } }); 伺服器： 回應瀏覽器的 preflight request 時需要特別在 header 注意兩個設定： Access-Control-Allow-Origin 'http://some.domainname' 這種 CORS 情境不能為 *（wildcard），需要指定特定的 domain，且需要和 preflight request 相同。 Access-Control-Allow-Credentials true 註：這邊只針對送出 cookie 時要特別調整的兩個 header 的設定方式，由於 CROS 時，瀏覽器送出 Ajax 的 request 將格式依情況而定。例如 Ajax content-type 為 application/json，伺服器在回應 preflight request 時需要在 header 中加入 Access-Control-Allow-Headers Content-Type，表示伺服器接受這種 content-type 的 request，這部分不在這裡討論。 做完上面的設定，瀏覽器送出 Ajax 時，即會在 header 中加入 Cookie 欄位，值如同同 domain 的形式一樣。 參考網址： MDN
張貼留言
閱讀完整內容
最近的文章

使用 Gulp Babel Browserify 打造 React Redux ES6 開發環境 （第二篇）

編譯 SASS 語法 | JavaScript 語法偵錯 | 單元測試 本文目的為介紹以 Gulp 打造 React Redux Router ES6 的開發及產品環境，以下將會說明所需的套件及設定方式，依建制步驟拆成五個篇章，關於 React Redux ES6 Jest 等相關知識不在此篇筆記介紹範圍。 第一篇 - 編譯 ES6 JSX 語法 | CSS JS 自動載入 | 本地端伺服器 編譯 JSX 及 ES6 語法 | Babel Browserify HTML 自動載入 CSS JS | Bower Wiredep Gulp Inject 建立開發用伺服器及自動重新載入 | Gulp Connect 第二篇 - 編譯 SASS | 語法偵錯 | 單元測試 編譯 SASS 語法 | Gulp Sass JavaScript 語法偵錯 | ESLint 單元測試 | Jest 第三篇 - 環境變數 | 程式碼壓縮 | 檔案壓縮 | 輸出隨機檔名 轉換開發及產品環境變數 | Browerify Dotenv Envify JavaScript SASS 程式碼壓縮 | Gulp Sass Uglify 產品環境下打包所有 JS CSS 檔案 | Gulp Useref 輸出的 CSS JS 檔案附加不重複的檔名 | Gulp Rev 第四篇 - 彙整 Gulp task 彙整 Gulp task - development 彙整 Gulp task - production 第五篇 - 導入 Redux React-Router 架構 導入 Redux Router 架構 | React Redux Router 前三篇會依序介紹每個功能及建置方式，第四篇會將零碎的 task 打包成一連串的動作，做成開發及產品環境的指令集，第五篇會把 react-redux 和 react-router 基本架構導入。 基本需求：已安裝 NodeJS 及了解如何使用 npm ，並知道如何使用 Gul...
張貼留言
閱讀完整內容

使用 Gulp Babel Browserify 打造 React Redux ES6 開發環境 （第一篇）

編譯 ES6 JSX 語法 | HTML 自動載入 CSS JS | 本地端伺服器 本文目的為介紹以 Gulp 打造 React Redux Router ES6 的開發及產品環境，以下將會說明所需的套件及設定方式，依建制步驟拆成五個篇章，關於 React Redux ES6 等相關知識不在此篇筆記介紹範圍。 第一篇 - 編譯 ES6 JSX 語法 | CSS JS 自動載入 | 本地端伺服器 編譯 JSX 及 ES6 語法 | Babel Browserify HTML 自動載入 CSS JS | Bower Wiredep Gulp Inject 建立開發用伺服器及自動重新載入 | Gulp Connect 第二篇 - 編譯 SASS | 語法偵錯 | 單元測試 編譯 SASS 語法 | Gulp Sass JavaScript 語法偵錯 | ESLint 單元測試 | Jest 第三篇 - 環境變數 | 程式碼壓縮 | 檔案壓縮 | 輸出隨機檔名 轉換開發及產品環境變數 | Browerify Dotenv Envify JavaScript SASS 程式碼壓縮 | Gulp Sass Uglify 產品環境下打包所有 JS CSS 檔案 | Gulp Useref 輸出的 CSS JS 檔案附加不重複的檔名 | Gulp Rev 第四篇 - 彙整 Gulp task 彙整 Gulp task - development 彙整 Gulp task - production 第五篇 - 導入 Redux React-Router 架構 導入 Redux Router 架構 | React Redux Router 前三篇會依序介紹每個功能及建置方式，第四篇會將零碎的 task 打包成一連串的動作，做成開發及產品環境的指令集，第五篇會把 react-redux 和 react-router 基本架構導入。 基本需求：已安裝 NodeJS 及了解如何使用 npm ，並知道如何使用 Gu...
張貼留言
閱讀完整內容

Sublime Text 3 - 建立 React 開發環境

Sublime Text 一直是我很喜歡的前端編輯器，兼具輕量及可攜帶性一直是我很喜歡的特色，然而最近在開發 React 的時候，發現開發沒有特別設定的開發體驗實在不佳，於是在參考許多網路上大大們的文章後完成以下的開發環境需求，下面內容會一步步說明各個需求的設定過程，或許各位有更好的 package 清單，歡迎留言建議。 本篇所建立的開發環境 支援 ES6、JSX 語法高亮 | Support JSX Syntax Highlight 錯誤提示 | ES-Linter Emmet 支援 JSX 語法 | Enable Emmet while writing in JSX 自動完成語法 | React-Snippet 基本需求 Sublime 已經安裝 Package Manager 及 Emmet ，若已使用 SublimeLinter-jshint ，請在使用者設定的地方將他關掉。此外，NodeJS 也需要安裝。 Sublime Package List SublimeLinter SublimeLinter-contrib-eslint Babel Babel Snippets Node Package List eslint babel-eslint 1. 支援 ES6、JSX 語法高亮 使用 package manager 安裝 Babel 、 Babel Snippets ，再次開啟 .js 檔案時，點選 View -> Syntax -> Open all with current extension as... -> Babel -> JavaScript(Babel)。 若遇到想更換主題卻無法切換，可以在 ctrl + ` 的視窗中輸入 view.settings().erase("color_scheme") 。 2. 錯誤提示 npm 安裝 eslint 、 babel-eslint npm install eslint babel-eslint -g 使用 package manager 安裝 SublimeLinter 、 SublimeLinter-contrib-eslint 。 在...
張貼留言
閱讀完整內容