在localhost加载图片报403的原因及解决方法

1,508 阅读2分钟

由于不识别 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设置成你的地址。

1、关闭host检查

法(1):可以在build目录下的webpack.dev.conf.js文件,devServer下添加disableHostCheck: true,跳过检查

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

2、设置成你的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…