前后端工作的分离带来的一个问题就是前后端在部署上分离的可能性,在部署上的分离又会触发浏览器安全机制——同源策略,从而导致不能访问非同域的资源。同样要解决跨域访问的问题,网上的解决方案也有很多,就是在跨域资源的响应中,加上允许跨域访问头信息即可。
添加头信息有几种方式:
1. 直接修改代码,在HTTP响应中添加上对应的头信息;
2. 使用代理服务器,在代理服务器返回响应的时候,再添加响应的头信息。
我们这里选择的是第2种方式——使用Nginx作为反向代理服务器。在使用Nginx作为代理服务器,并在配置中对应的location下添加上如下的设置:
location / {
#跨域访问设置
add_header 'Access-Control-Allow-Origin' '*' ; #可以是逗号隔开的域名,也可以是通配符,如允许来自任何域的请求,不够安全容易被攻击:
add_header 'Access-Control-Allow-Credentials' 'true' ;#当该标志为真时,响应于该请求是否可以被暴露
#其他语句
}
通过这两个配置,前端就可以跨域访问数据接口了。但是在后续的使用过程中遇到一个问题,就是简单的GET请求都是可以跨域访问到数据的,但是POST请求的时候浏览器依然报错说跨域访问被禁止。后来发现,是因为在POST请求时,处理数据过程中发生了异常,导致了浏览器报跨域访问错误。但为什么会这样呢?
经查,这是因为Nginx的add_header指令并不能在HTTP返回码为50X的时候起作用,由于服务器处理逻辑出错,导致了Nginx返回内部服务器错误(500),这个时候add_header是没有起作用的,故会出现这样的问题。