在网页开发当中,尤其是前后端分离的开发当中,解决跨域请求安全问题,是个很头疼的事情,实际上有三种解决方法:
1. 禁用浏览器的安全措施
谷歌浏览器,为了解决跨域调试安全问题,允许启动浏览器的时候,带上一个特殊的参数 --disable-web-security(即运行 "chrome ---disable-web-security"来启动chrome),这样启动后,就不会检查跨域请求是否违规了。
这个方法,是一个不依赖第三方软件的最简单的方法,但要求浏览器支持禁用安全措施。同时,要求你调试的网页必须在以上述参数打开的窗口当中,如果不在上述命令打开的窗口当中,还是支持跨域请求的。当然,这种方式也是不支持session和cookie的传递到第三方域的。
这种模式请求的URL要求硬编码在代码当中,如果将来发布的时候地址不一样,需要修改代码。
2. 安装浏览器插件
安装Allow-Control-Allow-Origin插件,该插件允许本地AJAX调用远程服务接口,可以解决跨域调试问题。
这种方式比第一种好一些,但本方式,需要服务器修改代码,在响应的头中间,添加“Access-Control-Allow-Origin:*”,允许跨域请求资源。如果服务器是自己开发的,当然问题不大,修改服务器代码就好了,如果不是自己控制的服务器,就不是很方便了。
3. 反向代理
利用反向代理,把特殊的请求转发到远程服务器,这种方式是最彻底、安全的方式。既可以保留cookie和session控制,也方便开发代码,如果将来部署的时候,无需修改代码可以直接部署,否则可能需要修改硬编码的代码。
具体做法是(以Windows apache 为例,Linux下参考下面的过程自己修改一下):
1. 安装apache.
2. 修改httpd.conf,把#Include conf/extra/httpd-vhosts.conf,取消注释变成 Include conf/extra/httpd-vhosts.conf
3. 修改conf/extra/httpd-vhosts.conf,增加类似代码:
# 8080为你的虚拟主机监听端口,可以修改为你自己的
Listen 8080
<VirtualHost *:8080>
DocumentRoot "你的HTML代码目录"
ServerName localhost
ProxyPass "/api/" "http://192.168.111.2/api"
ProxyPassReverse "/api" "http://192.168.111.2/api/"
<Directory />
Options FollowSymLinks
AllowOverride All
Order deny,allow
Allow from all
</Directory>
</VirtualHost>
需要注意的是,如果你的代码目录名是包含中文的,需要把httpd-vhosts.conf改成utf-8编码,否则apache无法正常解释配置文件。