在localhost加載圖片報403的緣由及解決方法

因爲不識別 localhost或者127.0.0.1，因此會在加載圖片的時候報403，

因此修改host文件使本地指向某個域名，而後使用域名去訪問後端環境。

解決方法： mac修改host文件的方法：

1.經過 vi 編輯host

方法以下：

（a）打開終端，輸入以下命令：

sudo vi /etc/hosts
複製代碼

（b）輸入密碼（登錄電腦的密碼）

（c）在終端會顯示一些數據，關於host介紹；若是最後一行顯示爲more時，按回車鍵，就能夠看到一些編輯命令；

分別有：open  edit  recover  delete  quit；

這裏輸入 E，進入編輯；進入編輯界面後，輸入  i   進行插入；完成插入後按ESC鍵，再輸入  :wq  進行保存；
複製代碼

2.經過 nano 編輯host

方法與上面相似，在終端中運行：

  sudo nano /etc/hosts

  一樣是輸入密碼，打開 hosts 文件，按照你的須要對該文件進行編輯；編輯完畢以後按 ctrl+o 保存，出現 File Name to Write: /etc/hosts 的時候按回車確認，再按 ctrl+x 退出便可。

3.在圖形界面中修改

打開 Finder，而後點擊菜單欄中的 前往——前往文件夾（或者快捷鍵 Shift+Command+G），在路徑中輸入 /private，進入以後在 etc 文件夾上點擊右鍵——顯示簡介，在文件夾簡介窗口的最下面找到「共享與權限」，將 everyone 的權限修改成「讀與寫」，若是你發現不能修改的話，將右下角的那把小鎖解開就能夠修改了。

修改 etc 文件夾的權限以後，再進入 etc 文件夾下面，修更名爲 hosts 文件的權限（一樣是everyone讀與寫），修改完成以後，你就能夠直接在 hosts 文件上點右鍵，經過「文本編輯」打開並編輯該文件了，不會出現沒有權限的提示。修改並保存完成以後，記得將該文件和 etc 文件夾的權限還原。

修改host文件後有時候會接着出現這個問題：Invalid Host header

經查是由於新版的webpack-dev-server出於安全考慮，默認檢查hostname，若是hostname不是配置內的就不能訪問。這樣有2中方法，一種是設置跳過host檢查，一種是直接host設置成你的地址。

一、關閉host檢查

法(1):能夠在build目錄下的webpack.dev.conf.js文件，devServer下添加disableHostCheck: true，跳過檢查

法(2):能夠在package.json文件修改scripts命令:webpack-dev-server --disableHostCheck=true

二、設置成你的host，加入你的host是xxx.com，一樣2中方法，修改配置文件，和script命令

法(1):在config目錄下修改index.js文件的host，這個默認是localhost，可修改爲 xxx.com

法(2):package.json的script語句: webpack-dev-server --host=xxx.com或者--public=xxx.com

參考： www.cnblogs.com/xulisheng/p… blog.csdn.net/Cookysurong…