nuxt.js 本地開發跨域問題（Access-Control-Allow-Origin）及其解決方案

問題描述

如今 web 開發都是先後端分離的年代，先後端分離的好處我就不囉嗦了，進入問題 ==>>>
使用 nuxt.js 本地開發 Vue 項目時，ajax 請求時可能會遇到跨域問題，控制檯具體報錯形式以下：

Failed to load http://example.com/api/somethings.do: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

這就是由於跨域問題致使的結果。

因而鄙人寫了一個解決 nuxtjs 本地開發跨域問題的 npm 包，具體安裝及其使用方式以下：

Nuxt.js Proxy Module

參考資料請看 nuxtjs api，
nodejs 中間件 http-proxy-middleware api

使用步驟：

1、 安裝 @gauseen/nuxt-proxy 依賴資源

npm install --save-dev @gauseen/nuxt-proxy

2、 添加 @gauseen/nuxt-proxy 資源至 nuxt.config.js 文件的 modules 對象之下

舉個栗子：

// nuxt.config.js

modules: [
    // 請求代理配置，解決跨域
    '@gauseen/nuxt-proxy',
],
proxyTable: {
    '/api': { target: 'http://example.com', ws: false }
},

注：

/api ———————— 每一個接口特定標識字段 [String]
target —————— 目標代理服務 [String]
ws —————————— 是否支持 websocket 代理 [Boolean]

歡迎訪問個人我的博客 攻城獅傳送門
未經做者容許，禁止轉載，謝謝！
歡迎留言、評論！