一、跨域的理解:

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

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

通过中转服务器把用户请求,前端数据转发到前端服务器、后端请求转发到后端服务器,让浏览器出发域名一致,即可。

为了更方便解释上面一句话含义,下面通过一张图,形象的阐述开发老师发布代码到分别的服务器,访问的时候是如何解决跨域的。

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

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;
}