跨域请求的剖析及服务端Nginx的解决方式
环境
Linux, nginx, js, ajax
什么是跨域
- 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作，即同源策略。
- 浏览器要限制跨域请求，其中最主要的原因就是安全性问题，比如防止CSRF攻击。
- 服务器之间是没有跨域请求限制，因此可以反向代理服务器，从而解决跨域。
举个栗子
http://www.baidu.com:80和ftp://www.baidu.com:80 不同域，协议不一样
http://www.baidu.com:80和http://www.xiaomi.com:80 不同域，主机名不一样
http://www.baidu.com:80和ftp://www.baidu.com:8080 不同域，端口号不一样
http://www.baidu.com:80/a.html和ftp://www.baidu.com:80/b.js 同域
应用场景
服务端Nginx配置
server {
listen 8000; # 端口
server_name localhost; # domain
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html; # 文件根目录
index index.html index.htm; # 默认起始页
}
}
index.html页面利用js跨域访问
<!DOCTYPE html>
<html>
<head>
<title>this is Index</title>
</head>
<body>
<h1>this is index page</h1>
</body>
<script>
$(function(){
$.get("http:localhost:9000/api/values", function(data, status){
console.log(data);
})
})
</script>
</html>
页面和接口的跨域比较
| api | 同源判断 | 结论 |
|---|---|---|
| http:localhost:8000/index.html | 协议，域名，端口不同 | 非同源 |
| http:localhost:9000/api/values | 协议，域名，端口不同 | 非同源 |
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行，但可使用nginx的反向代理配置解决跨域。
server {
listen 8000; # 端口
server_name localhost; # domain
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html; # 文件根目录
index index.html index.htm; # 默认起始页
}
location /api { #添加访问目录为/api的代理配置
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:9000; # 将接口反向代理至9000端口，从而解决跨域请求
}
Nginx代理
正向代理代理客户端，反向代理代理服务器。
评论区