解决前后端分离后跨域问题
近期正在参与的项目采用了前后端分离方式部署,恰巧遇到跨域问题。下面我对这个问题出现的原因及解决办法进行总结一下,希望大家拍砖。
问题原因
跨域出现的原因是因为前后端部署在非同域后,浏览器进行了安全限制。
例如:
前端应用:http://frontend.local/index.html
后端应用:http://backend.local/api/v1/query
当前端应用需要调用后端应用时,这个时候就会出现类似如下错误。
No-Access-Control-Allow-Origin的意思是,请求头内没有找到找到这个标识。也就是说,后端应用不允许这个域名请求。
解决办法
解决跨域有两种办法
1.Nginx上增加请求头Access-Control-Allow-Origin,推荐使用
add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Origin your_domain; add_header Access-Control-Allow-Methods GET,POST; add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Cookie;
2.cors设置,要在后端应用在响应头中加Access-Control-Allow-Origin,推荐使用
# 服务端允许访问的域名 Access-Control-Allow-Origin=your_domain # 服务端允许访问Http Method Access-Control-Allow-Methods=GET, POST, PUT, DELETE, PATCH, OPTIONS # 服务端接受跨域带过来的Cookie,当为true时,origin必须是明确的域名不能使用* Access-Control-Allow-Credentials=true # Access-Control-Allow-Headers 表明它允许跨域请求包含content-type头,我们这里不设置,有需要的可以设置 #Access-Control-Allow-Headers=Content-Type,Accept # 跨域请求中预检请求(Http Method为Option)的有效期,20天,单位秒 Access-Control-Max-Age=1728000
3
.jsonp,安全性差,不推荐
这里只讨论Nginx与CORS设置头信息方式。设置后,我们会发现除了原请求基础上,还增加了一个叫Option的请求。那这个请求是干什么的呢。
原因:因为本次Ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS),这个操作由浏览器自己进行。如果服务器端后台接口没有允许OPTIONS请求,将会导致无法找到对应接口地址,由此可知这个Options请求是一个试探性请求,再接收到服务端允许后,才继续发送真实的请求。
ps. 如果跨域需要携带cookie去请求,Access-Control-Allow-Credentials
必须为true,但是需要注意当Access-Control-Allow-Credentials=true
时,Access-Control-Allow-Origin
就不能为” * “ ,必须是明确的域名
参考:跨源资源共享(CORS)