跨域原理：http://www.cnblogs.com/Alear/p/8758331.html

介紹Ngnix之前，我麽先來介紹下代理是什麽~

　　代理相當於中間人，中介的概念

　　代理分為正向代理和反向代理。(PS:本文介紹的解決跨域方法用的是反向代理)

　　　　正向代理：現在客戶端發送一個請求給服務端，可是該客戶端沒有訪問權限，於是只能交給一個代理服務器來轉交該客戶端的請求給服務端響應。

　　　　　　　　　客戶端知道請求資源地址，也能感知代理服務器的存在。

　　　　反向代理：客戶端發送一個請求，代理服務器收到這個請求，判斷到這個請求對應的服務器並不能響應。於是代理服務器自行轉發到可以響應該請求的服務器，並將響應內容返回給客戶端。

　　　　　　　　　客戶端並不知道實際上是哪個服務器響應的內容 。

Ngnix是什麽：

　　Nginx (engine x) 是一個高性能的HTTP和反向代理服務器。

安裝Ngnix和基本配置介紹可以看下這篇~ ：

Linux下： https://blog.csdn.net/yougoule/article/details/78186138

Window下：;https://www.cnblogs.com/saysmy/p/6609796.html

(PS)如果在window命令行操作出現下面這種情況

改成： .\nginx -s start （‘ngnix’ 換成 ‘ .\ngnix’）

接下來不廢話了，我們來點實際的招式，直接上栗子，敲黑板！！！

我現在有一個項目是在 "localhost:80/test(等於localhost/test)下的"

可是我有個ajax請求是向localhost:8080/echarts/map請求的

如果直接請求瀏覽器的控制臺會直接被報錯

一般出現這種錯誤是跨域引起的

那麽我們可以在ngnix配置文件nginx.conf(在ngnix安裝目錄下的conf文件下)這樣配置來實現反向代理

nginx.conf

server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        root   "D:/phpStudy/WWW";
                    
        location /echarts/map {
            #rewrite localhost:8080/echarts/map break;
            if ($request_method = ‘OPTIONS‘) { 
                add_header Access-Control-Allow-Origin http://localhost; 
                add_header Access-Control-Allow-Credentials true; 
                add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS‘; 
                add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘; 
                return 200; 
                }
            if ($request_method = ‘POST‘) {
                add_header ‘Access-Control-Allow-Origin‘ http://localhost; 
                add_header ‘Access-Control-Allow-Credentials‘ ‘true‘; 
                add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘; 
                add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘;
                }
            proxy_pass   http://localhost:8080/echarts/map;
       }
           location /test/{
            if ($request_method = ‘OPTIONS‘) { 
                add_header Access-Control-Allow-Origin http://localhost; 
                add_header Access-Control-Allow-Credentials true; 
                add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS‘; 
                add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘; 
                return 200; 
                }

                if ($request_method = ‘POST‘) {
                add_header ‘Access-Control-Allow-Origin‘ *; 
                add_header ‘Access-Control-Allow-Credentials‘ ‘true‘; 
                add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘; 
                add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘;
                }

                if ($request_method = ‘GET‘) {
                add_header ‘Access-Control-Allow-Origin‘ *; 
                add_header ‘Access-Control-Allow-Credentials‘ ‘true‘; 
                add_header ‘Access-Control-Allow-Methods‘ ‘GET, POST, OPTIONS‘; 
                add_header ‘Access-Control-Allow-Headers‘ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type‘;
                } 
            proxy_pass   http://localhost:80;
            #rewrite ^/localhost:80/941bigdata/
       }    
 

於是我們的站點訪問地址應該改為 ”localhost:8081/test“

那個ajax外源請求地址應該改為”http://localhost:8081/echarts/map“

然後就能成功進行跨域訪問啦~

我們的http請求

補充：

　　我們會發現上面有不止配置了POST請求，還配置了OPTION請求。如果沒有配置OPTION，則http報文裏的請求方式是option，並報403錯誤

　　那是因為做跨域的時候，瀏覽器會自動發起一個 OPTIONS 方法到服務器。

　　當contentType設置為三個常用的格式以外的格式，如“application/json”時，會先發送一個試探的OPTIONS類型的’預請求‘給服務端，用於探測後續真正需要發起的跨域 POST 請求對於服務器來說是否是安全可接受的，

　　因為跨域提交數據對於服務器來說可能存在很大的安全問題。

我們在進行請求訪問時候，多看看http報文的內容，可以幫助我們很快找到問題關鍵所在。像我在解決跨域問題時，http報文給了我很大思路。

這是Ngnix反向代理請求解決跨域的方式。後面我會出一篇後端(springMVC)通過CORS解決跨域的方案.

版權聲明：本文為博主原創文章，未經博主允許不得轉載喲

[跨域]跨域解決方法之Ngnix反向代理