這算是第一次實打實遇到跨域問題，之前做的東西都是用後臺MVC框架進行渲染前端頁面，加上之前準備面試題都只是知道個大概是個什麼東西，這才在這次的前後端分離練習中遇到了這個問題。

具體啥是跨域問題，為了不喧賓奪主，這裡不進行介紹，有興趣的可以看看下面的兩篇文章：
瀏覽器同源政策及其規避方法
前後端分離跨域問題解決方案

還有，專案是要使用 webpack 和 webpack.devServer 進行配置的，如果不想在專案中配置，下面的部分可以不用看了~

問題

舉個栗子，前端專案可能會執行在 http://localhost:8080，我的Node.js後端api伺服器是在 http://localhost:3000

前端程式想要請求後端介面 /register（註冊），程式會報下面的錯誤：

POST http://localhost:8080/register 404 (Not Found)

想來也正常，我的後端伺服器是在 3000 埠下啟動的，你訪問 8080 怎麼能訪問到呢。那我們來改一下，前端訪問 http://localhost:3000/register 直接指定埠號，然後會報下面的錯誤：

Failed to load http://localhost:3000/register: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
 

這就是跨域問題，不同的埠號也會引起跨域問題，解決方案一般有三種：JSONP，CORS，反向代理，這裡我們用第三種 反向代理。

webpack.devServer

開啟 webpack.config.js

module.exports = {
    ...,    //其他配置不列了
    devServer: {
        ...,    //其他配置不列了
        proxy: {
            //在這裡配置~~~
        }
    }
}

可以這樣配置：

proxy: {
  "/api": "http://localhost:3000"
}

這樣就可以跨域訪問到了，不同的是前端請求以及後端api都要加一個 /api

也可以這樣配置:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

這樣的配置，就是後端api地址可以只要原來的 /register，前端請求的地址還是要改成 /api/register.