@TOC前端
若是要理解什么是跨域vue
广义上的跨域是指一个域下的文档或脚本试图去请求另外一个域下的资源。即浏览器的同源策略/SOP限制引发的跨域也属于在内;node
同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,若是缺乏了同源策略,浏览器很容易受到XSS、CSFR等攻击。同源策略即: 协议+域名+端口"三者相同nginx
URL 说明 是否容许通讯
http://www.baidu.com/hello.js
http://www.baidu.com/world.js 同一域名,不一样文件或路径 容许(无跨域)
http://www.baidu.com/hello/world.js
http://www.baidu.com:8000/hello.js
http://www.baidu.com/hello.js 同一域名,不一样端口 不容许(有跨域)
http://www.baidu.com/hello.js
https://www.baidu.com/world.js 同一域名,不一样协议 不容许(有跨域)
http://www.baidu.com/hello.js
http://192.168.22.128/world.js 域名和域名对应ip 不容许(有跨域)
http://baidu.com/hello.js
http://x.baidu.com/hello.js 主域相同,子域不一样 不容许(有跨域)
http://www.baidu.com/hello.js
http://www.baidu.com/hello.js
http://www.bai.com/world.js 不一样域名 不容许(有跨域)
复制代码
1. jsonp解决跨域
2. document.domain + iframe解决跨域
3. nginx代理解决跨域
4. nodejs中间件代理解决跨域
复制代码
server {
listen 80;
server_name localhost; //前端域名 具体原理解释在下方
location / { // location / 代理全部请求 而若是是 location /api 则匹配到有/api 前缀的请求才会代理
proxy_pass www.baidu.com; // 服务端域名
}
}
复制代码
根据浏览器的SOP/同源策略 localhost对www.baidu.com发起请求必定会出现跨域问题;但如今只要咱们启动nginx服务器把server_name设置成前端的域名, 此时前端发起的请求至关因而localhost对localhost发起,这样是不会引发跨域的;但真实状况是,nginx对localhost的请求代理回 www.baidu.comgit
这里赘述一下什么是代理;github
代理是在服务器和客户端之间假设的一层服务器(中间服务器),代理将接收客户端的请求并将它转发给服务器,而后将服务端的响应转发给客户端。json
代理分为正向代理和反向代理:具体区别自行百度...
复制代码
nginx是经过把请求分发到服务器列表来实现负载均衡的;具体实现以下:api
upstream balance.com{
server 192.168.2.100:42000;
server 192.168.2.101:42000;
server 192.168.2.102:42000;
}
server {
server_name fe.server.com;
listen 80;
location /api {
proxy_pass http://balance.com;
}
}
复制代码
上面的配置只是指定了nginx须要转发的服务端列表,并无指定分配策略。跨域
轮询策略是默认的策略,把每一个请求按顺序逐一分配到不一样的server,若是server挂掉,能自动剔除浏览器
upstream balance.com{
server 192.168.2.100:42000;
server 192.168.2.101:42000;
server 192.168.2.102:42000;
}
复制代码
把请求优先分配给链接数最少的server,能够平衡每一个队列的长度;
upstream balance.com{
least_conn;
server 192.168.2.100:42000;
server 192.168.2.101:42000;
server 192.168.2.102:42000;
}
复制代码
优先分配给响应时间最短的服务器。
upstream balance.com {
fair;
server 192.168.2.100:42000;
server 192.168.2.101:42000;
server 192.168.2.102:42000;
}
复制代码
使用weight来指定server访问比率,weight默认是1。访问率比例等于权重比例;
upstream balance.com{
server 192.168.2.100:42000 weight=1;
server 192.168.2.101:42000 weight=2;
server 192.168.2.102:42000 weight=3;
}
复制代码
每一个请求会按照访问ip的hash值分配,这样同一客户端连续的Web请求都会被分发到同一server进行处理,能够解决session的问题。若是server挂掉,能自动剔除。
upstream balance.com{
ip_hash;
server 192.168.2.100:42000 weight=1;
server 192.168.2.101:42000 weight=2;
server 192.168.2.102:42000 weight=3;
}
复制代码
以上是博主目前了解和使用到的一些技巧和知识啦,至于关于nginx部署后404问题请看@安静Eno| vue框架下部署上线后刷新报404问题解决方案
尊重原著 文章转自@安静Enonginx部署/代理/跨域