前端跨域，nginx反向代理的解决⽅案
前端跨域，nginx反向代理的解决⽅案
现在越来越多的公司开始使⽤前后端分离的技术，⽽盲⽬的分离是不理智的，跨域也是第⼀难题。我的第⼀份⼯作就是公司第⼀个以前端开发者的⾝份⼊职，此时公司所有的项⽬都已正式运⾏了（项⽬太多，结构复杂，团队分散，后台不能改）
先了解⼀下为什么跨域：
1.浏览器先根据同源策略对前端页⾯和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。
2.服务器解析程序收到浏览器跨域请求后，根据⾃⾝配置返回对应⽂件头。若未配置过任何允许跨域，则⽂件头⾥不包含Access-
Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则⾥的域名的⽅式。
3.浏览器根据接受到的http⽂件头⾥的Access-Control-Allow-origin字段做匹配，若⽆该字段，说明不允许跨域；若有该字段，则对
字段内容和当前域名做⽐对，如果同源，则说明可以跨域，浏览器发送该请求；若不同源，则说明该域名不可跨域，不发送请求
总结⼀下跨域的原因就是⼀句话：不同IP或不同端⼝就是跨域。想了解更详细的可以去查查别⼈的资料。
所以想要解决跨域的⽅法就是让服务器追加该前端的域名。
后台不加怎么办？以下就是解决⽅案之⼀：
让前端页⾯和后台交互地址同源。
Nginx代理⽅式
这⾥所说的代理是指前端的代理，跟后端没什么关系
修改f配置⽂件
server {
listen 80;
server_name localhost;
location / {
root D:\test;
index index.html index.htm;
}
}
这⾥是代理了⼀个本地项⽬，开通80端⼝访问，root是本地项⽬路径，index是项⽬的⼊⼝⽂件。
我只贴了主要的地⽅，404、500之类的东西可以参考别⼈或看官⽅⽂档。
如果你的前端采⽤的node.js之类的服务器运⾏的话
location / {
proxy_pass localhost:8080;
}
这也已经是反向代理了，使⽤80端⼝就可以访问8080端⼝的前端页⾯了。
Nginx反向代理
进⼊正题，在同⼀配置⽂件下加点东西
location /test{
rewrite ^.+test/?(.*)$ /$1 break;
proxy_pass localhost:8090;
}
这是反向代理了8090端⼝的服务器，/test作为标识指向该服务器，rewrite重定向URL，将/test删除掉。讲解下使⽤⽅法
所以在前端向后台发送接⼝请求的时候⼀定要注意了：
$.ajax({
url:'localhost:80/test/url', // /test代表8090服务器
type:'post',
async:true,
data:{},
timeout:5000,
dataType:'json',
success:function(data,textStatus,jqXHR){
console.log(JSON.stringify(data))
},
error:function(xhr,textStatus){
console.log('错误')
}
})
随⼿写的⼀份Nginx配置⽂件
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /test {
rewrite ^.+test/?(.*)$ /$1break;
proxy_pass localhost:8090;
}
location /Additional {
rewrite ^.+Additional/?(.*)$ /$1break;
proxy_pass localhost:8091;
}
location / {
root D:\test;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500502503504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass 127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
nginx部署前端项目
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
可以相应追加更多需要⽤到的服务器
location /Additional {
rewrite ^.+Additional/?(.*)$ /$1 break;
proxy_pass localhost:8091;
}
⼩结：nginx反向代理绝对不是解决跨域的最佳⽅案，在开发、测试、正式环境下都需要配置相应的配置⽂件，万⼀后台的IP或端⼝改变都需要修改配置⽂件，⽽且作为反向代理它不过是做了⼀个跳转，在速度上是要⽐直连要慢的，性能也会有影响。跟后台的⼈好好商量，能改后台就该后台，吃顿饭喝
顿酒，不⾏还有py呢！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论