vue-cli3 配置proxy代理解決開發環境跨域問題

場景

在開發環境遇到跨域的問題，沒法利用後端作相關配置來解決，因此只能用前端的方法來實現跨域訪問。

1、概念介紹

一、跨域介紹

這裏的域指的是協議+域名+端口號，當目標url的協議和域名以及端口號三者都和咱們網站自己的url同樣時，被認爲同域，不同則認爲跨域，瀏覽器會對跨域的請求進行限制，出於安全方面的考慮。所以只有瀏覽器會遇到限制，而在node環境發起一樣的請求不會受限制。

二、代理原理介紹

如圖，當用戶A沒法直接訪問服務器B上面的資源（好比咱們的跨域），可是代理服務器Z能夠訪問服務器B上面的資源。而後咱們用戶A直接訪問代理服務器Z，代理服務器Z去訪問服務器B拿到想要的資源再返回給用戶A，這樣咱們就拿到了服務器 B上面的資源，解決跨域限制的問題。

三、express介紹

Express 是一個路由和中間件 Web 框架，我理解的 express在這裏起到的做用是： 一、發起http請求拿到須要的B服務器上面對應的資源 二、啓動一個http服務供用戶A訪問

2、具體配置

好了，介紹說完了，下面開始上代碼吧 一、將目標接口請求地址中的host和端口改爲運行vue項目相同的host和端口

二、在vue項目的根目錄下找到vue.config.js文件，若是沒有就 新建一個，再寫入 如下內容

module.exports = {
    devServer: {
      proxy: {
        '/api': { //
          target: 'https://news-at.zhihu.com/', //須要請求的目標接口
        }
      }
    }
  }
複製代碼

這樣就能夠解決開發環境訪問跨域接口的問題了，若是有問題，歡迎你們指出 cli.vuejs.org/zh/config/

github.com/chimurai/ht…