Vue中級指南-04 Vue中跨域以及打包部署到nginx跨域設置

前言

衆所周知,咱們在作先後端分離項目的時候,常常須要在本地起前端工程,接口但願拉取服務端的實際數據而不是本地的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…

  

• 選擇download進去選擇下載版本頁面

• 這裏選擇穩定版下載便可

• 下載完成後目錄以下

• 進入cong文件,打開nginx.congf文件,找到server對象裏面的listen屬性查看查看監聽的端口號(默認80端口)

• 在nginx根目下啓動nginx.exe,若是出現一個黑窗口一閃而過,說明啓動成功,訪問localhost:80出現此頁面則訪問成功

• 若是訪問不成功有多是端口被佔用,修改上面的端口號,重啓nginx便可, 瀏覽器訪問localhost:XXXX

Vue項目部署在nginx上的配置

• vue項目運行 npm run build 進行項目打包記得有本地靜態資源文件的須要須要webpack配置, 以下:

config文件下的index.js文件找到build屬性
assetsPublicPath: '/'   =>>>>>   assetsPublicPath: './' 
複製代碼

build文件下的untils文件中找到vue-style-loader
增長 publicPath: '../../'
複製代碼

• 此時打包後的dist文件能夠不放置服務器環境下訪問, 直接打開dist文件目錄下的index.html就能夠打開訪問

這時候的靜態資源均可以被加載出來,且不會報錯,可是api訪問的話仍是會報錯
複製代碼

• 將打包後的dist文件裏面的內容複製一份到nginx文件中的html文件中

打開html文件清空裏面的內容,將複製的內容粘貼進去
複製代碼

• 進入cong文件,打開nginx.congf文件,找到server屬性在裏面新增一條配置

location /api {			
		proxy_pass http://localhost:4000/;			
	}
複製代碼

你要訪問那個地址這裏就修改成你要訪問的那個地址
複製代碼

• 以上配置就所有完成啦

注意: 修改完nginx中的配置必定要重啓nginx才能夠, 切記!!!

nginx簡單的操做命令

nginx.exe -s stop // stop是快速中止nginx，可能並不保存相關信息
nginx.exe -s quit // quit是完整有序的中止nginx，並保存相關信息
nginx.exe -s reload // 當配置信息修改，須要從新載入這些配置時使用此命令
nginx.exe -s reopen // 從新打開日誌文件
nginx -v // 查看Nginx版本
複製代碼

以上就是我在項目中使用的配置啦,還有一些更高級的配置尚未接觸使用到,供你們參考