最近的專案都是關於前後端分離的，當我們把專案橫向分層前後端分離後，由於瀏覽器安全限制會發現請求出現異常，主要原因是瀏覽器的同源策略（協議、域名和埠）是否相同。

解決方案：

解決跨域的方法有很多，如
(1)通過jsonp跨域
(2)通過修改document.domain來跨子域
(3)使用window.name來進行跨域
(4)使用HTML5中新引進的window.postMessage方法來跨域傳送資料
(5)使用代理伺服器
(6)CORS全稱是"跨域資源共享"

本文主要講解CORS跨域和Ningx反向代理。

CORS跨域：

CORS方案：跨域時部分瀏覽器預設不攜帶cookie，因此為了攜帶cookie需要在前端設定xmlhttprequest的withCrendetalls屬性。
同時在後端攔截器在響應頭中設定跨域設定

response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
response.setHeader("Access-Control-Allow-Credentials", "true");
 

Nginx反向代理

nginx反向代理，通過修改nginx配置檔案實現反向代理，請求統一通過nginx分發請求

Nginx配置（192.168.75.139）

# 負載均衡
upstream my_site {
      server 192.168.75.138:8080;
      server 192.168.75.137:8080;
      server 192.168.75.136:8080;
    }

   server {
        listen       8081;
        server_name  localhost;
        location ^~ /api/ {
            proxy_pass   http://my_site/;
            proxy_set_header            Host $host;
            proxy_set_header            X-Real-ip $remote_addr;
            proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location = / {
            proxy_pass   http://my_site/nginx/indexNginxCrossQuest.jsp;
        }
        location = /nginx/ {
            proxy_pass   http://my_site/nginx/;
            proxy_set_header            Host $host;
            proxy_set_header            X-Real-ip $remote_addr;
            proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location ~ \.(html|htm|ico|png|jpg|jpeg|js|css|bmp)$ {
            proxy_pass   http://my_site;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
      
 

瀏覽器請求（192.168.75.1）

綜合對比