为什么会出现跨域及判定
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源(域名,协议,端口)策略造成的,是浏览器对JavaScript施加的安全限制。
当前端调用处于不同域名或者端口的时候,就会出现跨域问题。
那么跨域问题是如何判定的呢?通过搜索和实验后得出以下步骤:
- 浏览器先根据同源策略对前端页面和后台交互地址做匹配,若同源,则直接发送数据请求;若不同源,则发送跨域请求。
- 服务器解析程序收到浏览器跨域请求后,根据自身配置返回对应文件头。若未配置过任何允许跨域,则文件头里不包含
Access-Control-Allow-origin
字段,若配置过域名,则返回Access-Control-Allow-origin
+对应配置规则里的域名的方式
。 - 浏览器根据接受到的http文件头里的
Access-Control-Allow-origin
字段做匹配,若无该字段,说明不允许跨域;若有该字段,则对字段内容和当前域名做比对,如果同源,则说明可以跨域,浏览器发送该请求;若不同源,则说明该域名不可跨域,不发送请求
解决跨域的最佳实践
解决跨域的一般方法有 jsonp,CORS(修改 header 头),端口转发等,前两者需要重写服务器代码,session 也会丢失。
有一种完美的解决方式就是端口转发。如果用前两者的方法,就必有多暴露出来的一个端口或者服务器 ip,如果只能使用一台服务器的一个端口进行部署时,jsonp 和 cors 就会失效。
如下图的配置文件所示,其前端页面配置在8080端口,后端服务器配置在8000端口,Nginx将前端对以http://localhost:8080/api/为前缀的请求转发到http://localhost:8000
1
2
3
4
5
6
7
8
9
10
11
12
13
|
server {
listen 8080;
charset utf-8;
location / {
root /home/ivan/Desktop/ProjectManagement/fontEnd;
}
location ~ ^/api/{
proxy_pass http://localhost:8000;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For$proxy_add_x_forwarded_for;
}
}
|
so,目前来看,nginx 还是部署前后端分离服务器时的最佳时间。开发环境中前端可以使用http-proxy-middleware的方式来解决跨域问题。
server {
listen 80;
server_name your.domain.name;
location / {
proxy_pass http://localhost:5000/; # 把根路径下的请求转发给前端工具链(如gulp)打开的开发服务器,如果是产品环境,则使用root等指令配置为静态文件服务器
}
location /api/ {
proxy_pass http://localhost:8080/service/; # 吧 /api 路径下的请求转发给真正的后端服务器
proxy_set_header Host $http_host; # 把host头传过去,后端服务程序将收到your.domain.name,否则收到的是localhost:8080
proxy_cookie_path /api /service; # 把cookie中的path部分从/api替换成/service
proxy_cookie_domain localhost:8080 your.domain.name; # 把cookie的path部分从localhost:8080替换成your.domain.name
}
}