眾所周知,我們在做前后端分離項目的時候,經常需要在本地起前端工程,接口希望拉取服務端的實際數據而不是本地的mock數據,而如果本地程序直接訪問遠程接口， 肯定會遇到跨域問題。

什么是跨域?實現跨域的多種方式?

這里我就不詳細介紹了,大家自行百度哈

為什么要實現前端跨域

一般來講,前后端分離的項目在大公司都會由后臺設置允許跨域訪問,因為后臺設置允許跨域是很簡單和方便的,但是某些情況下,一些小公司或者你工作的場所后臺不怎么配合的情況下,這就需要前端來配置跨域請求來方便我們使用接口

vue項目中的配置

以vue-cli搭建的項目為例, 在webpack配置文件 /config/index.js, 由于我們是在 開發環境 下使用，自然而然是要配置在dev里面,找到 proxyTable屬性,配置如下:

dev: {  // Paths  assetsSubDirectory: 'static',  assetsPublicPath: '/',  <!-- 使用proxyTable進行跨域設置 -->  proxyTable: {    '/api': {     target: 'http://www.abc.com', // 設置你調用的接口域名和端口號, 別忘了加http     changeOrigin: true, // 是否跨域     pathRewrite: {       // 這里理解成用'/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替        // 比如我要調用'http://www.abc.com/user/add'，直接寫'/api/user/add'即可'      '^/api': '/'     }    }  },  // Various Dev Server settings  host: '0.0.0.0', // can be overwritten by process.env.HOST  port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined  autoOpenBrowser: false,  errorOverlay: true,  notifyOnErrors: true,  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-  /**   * Source Maps   */  // https://webpack.js.org/configuration/devtool/#development  devtool: 'cheap-module-eval-source-map',  // If you have problems debugging vue-files in devtools,  // set this to false - it *may* help  // https://vue-loader.vuejs.org/en/options.html#cachebusting  cacheBusting: true,  cssSourceMap: true },

上面proxyTable屬性中的配置,效果就是將本地8080端口的一個請求代理到了http://www.abc.com這個域名下

'http://localhost:8080/api' ===> 'http://www.abc.com/'

注意: 以上設置只能在開發環境下使用,打包后會出現路徑問題的 注意: Vue-cli提供的代理功能，只是讓你在開發環境下使用的，它(http-server-middleware)依賴于node環境，生產代碼應該使用npm run build然后把dist放到nginx服務器上，在nginx上配置代理地址 Vue項目部署到nginx上的跨域設置

這還沒完，現在我們要將項目部署到nginx上，此時原來可以訪問的接口又訪問不到了，所以這個時候還要對nginx進行設置。

windows系統下載nginx 下載地址: nginx.org/en/docs/win…