從零開始搭建網站環境（php-yaf nginx mariadb）番外篇——跨域

跨域

先後端分離開發免不了涉及跨域問題，今天就來講一說它。

固然，這只是我我的的理解，若有錯誤，歡迎指正

開發環境下的跨域

在Vue中解決跨域：

在前端項目根目錄新建 vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.server.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

什麼意思呢，簡單來講就是當請求路徑中包含 /api 的時候，就把該請求代理到 http://api.server.com 。
不明白？舉個例子：
假如我要訪問 http://api.server.com 去獲取某話題，

axios.get("http://api.server.com/topic/233")

假設你的域名是 server.com，別看只少了 api ，瀏覽器就是不讓你過，是否是很氣？
這就是瀏覽器的同源策略致使的，也就是跨域問題的根源。
可是！nodejs是沒有跨域問題的，因而利用這一點，讓nodejs去獲取數據不就能夠了嗎？
但願你不要問nodejs是啥，這個我真的解釋不了……
話題轉回來，上面的 proxy 配置就是告訴node，當訪問路徑中有 /api 這個字符串時你就把它接管下來，而後去訪問 http://api.server.com 獲取數據，而後再把數據給瀏覽器，Ok，跨域問題解決了！鼓掌~

總的來講就是，瀏覽器訪問

axios.get("http://server.com/api/topic/233")

node發現有 api 便接管請求，轉而去訪問 http://api.server.com/topic/233，得到數據後返回給瀏覽器。
聰明的你或許會問了，路徑中的 api 去哪了？
是的，它被吃了，具體來講是被 pathRewrite 給吃了……

說點題外話，咱們在開發的時候，訪問路徑通常是 http://localhost:8080/api/topic/233，問題是打包的時候咱們須要把路徑換成 http://server.com/api/topic/233，畢竟你的域名不多是localhost， 手動去換不太現實，咱們要配置 webpack 讓它開發時用 localhost，發佈時用 server.com

在前端項目根目錄創建
.env.development（開發環境）

// 開發環境下配置
module.exports = { 
  NODE_ENV = 'development'
  VUE_APP_BASE_API = 'http://localhost:8080'
  VUE_APP_VERSION = '0.0.2'
}

.env.production（生產環境）

// 生產環境下配置
module.exports = { 
  NODE_ENV = 'production'
  VUE_APP_BASE_API = 'http://server.com'
  VUE_APP_VERSION = '0.0.1'
}

簡單說一下使用方法（有機會的話細說）：
創建 utils/http.js文件

import axios from 'axios';
// 建立axios實例
var instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 1000 * 12
});
export default instance;

import axios from '@/utils/http';
axios.get("/api/topic/233")

這樣，webpack就會自動判斷該使用哪一個域名了。

未完待續

目錄：
從零開始搭建網站環境（php-yaf nginx mariadb）第一章
從零開始搭建網站環境（php-yaf nginx mariadb）第二章
從零開始搭建網站環境（php-yaf nginx mariadb）第三章