通过代理实现实现前后端分离跨域问题

一、跨域的理解：

跨域是指A域名页面想获取b域名资源，如果a、b的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源**。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！**

二、教研平台解决跨域方案原理

通过中转服务器把用户请求，前端数据转发到前端服务器、后端请求转发到后端服务器，让浏览器出发域名一致，即可。
 
为了更方便解释上面一句话含义，下面通过一张图，形象的阐述开发老师发布代码到分别的服务器，访问的时候是如何解决跨域的。

![教研平台-运维-实现前后端分离-跨域解决方案.jpg][1]

upstream jyxxx.xesv5.com {
     server 10.19.1.255:80;
    }
    upstream jyxxxadmin.xesv5.com {
     server 10.19.1.244:80;
    }
    server {
            listen 80;
            server_name jyworkflow.xesv5.com;
            location / {
                    proxy_pass http://jyxxx.xesv5.com;
                    proxy_redirect          off;
                    proxy_set_header        Host $host;
                    proxy_set_header        X-Real-IP $remote_addr;
                    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                    client_max_body_size    500m;
                    client_body_buffer_size 128k;
                    proxy_ignore_client_abort on;
                    proxy_connect_timeout   60;
                    proxy_send_timeout      60;
                    proxy_read_timeout      60;
                    proxy_buffer_size       128k;
                    proxy_buffers           32 32k;
                    proxy_busy_buffers_size 128k;
                    proxy_temp_file_write_size 128k;
                    proxy_next_upstream error timeout http_500 http_502 http_504;
                    add_header Xes-App $upstream_http_server;
            }
        location /manager {
                    proxy_pass http://jyxxxadmin.xesv5.com;
                    proxy_redirect          off;
                    proxy_set_header        Host jyxxxadmin.xesv5.com;
                    proxy_set_header        X-Real-IP $remote_addr;
                    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                    client_max_body_size    500m;
                    client_body_buffer_size 128k;
                    proxy_ignore_client_abort on;
                    proxy_connect_timeout   60;
                    proxy_send_timeout      60;
                    proxy_read_timeout      60;
                    proxy_buffer_size       128k;
                    proxy_buffers           32 32k;
                    proxy_busy_buffers_size 128k;
                    proxy_temp_file_write_size 128k;
                    proxy_next_upstream error timeout http_500 http_502 http_504;
                    add_header Xes-App $upstream_http_server;
            }
     
            access_log  /usr/local/openresty/nginx/logs/jyxxx.xesv5.com_access.log  main;
    }

[1]: http://blogimg.bravedu.com/2018/10/2156476532.jpg

BraveDu

通过代理实现实现前后端分离跨域问题

您可以选择一种方式赞助本站

发表评论