为什么会出现跨域及判定
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源（域名，协议，端口）策略造成的，是浏览器对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
}
}