在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…