[ Day 17]

說明:
d16說到為了解決CORS問題，使用代理後端呼叫API是個比較好的做法，但是前端專案在正式部屬打包成static檔案，再掛到server的nginx上，由nginx負責做代理的事情。

但是開發環境一般我們不會去掛nginx，而是由webpack-dev-server這樣的工具起server測試，但是這就會讓端口不一致，後端server和webpack-dev-server是兩個不同程式，Port會不一樣。還是會有CORS問題。

所以為了解決這問題，使用webpack的proxyTable是必要的，而且配置一次後，在呼叫API的地方不用再重複配置。

一、修改webpack config裡的index.js
如果是由vue-cli產生的webpack專案，在config裡有個index.js檔案，
可以配置proxyTable，原本預設為空。

proxyTable: {
      '/api': {
        target: "http://localhost:3310",  //node express api的url位置
        changeOrigin: true,
        pathRewrite: {
            '^/api': 'api'
        }
      }
    }

這裡將localhost:8080這個位置(port也是可配置)的/api位置，指向localhost:3310的後端server。

二、request 測試

<template>
  <div>
    <button @click="getData">拿資料</button>
    <div>取回的資料:{{userData}}</div>
  </div>
</template>

<script>
import chalk from 'chalk'
import request from 'request'

export default {
  data(){
    return { 
      userData:''
    }
  },
  methods:{
    getData() {
      var url = 'http://localhost:8080/api/user'
      request.get(url, (err, res, body) => {
        this.userData = body
      })
    }
  }
}
</script>

<style>

</style>

示範在vue組件中呼叫localhost:8080/api/user這個url，此時的設定已經導向localhost:3310/api/user這個網址了。
這裡後端使用的程式是day7的express範例。

這樣就解決CORS問題。

參考資料:https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html

[Day17結束]