我也說說Nginx解決前端跨域問題，正確的Nginx跨域配置（后端Nginx CORS跨域配置珍逸、CORS設(shè)置逐虚，后端允許跨域請求）

最近連續(xù)兩個朋友問我跨域相關(guān)問題，我猜想可能不少朋友也遇到類似問題沿量，我打算寫個博客聊一下我實際使用的配置浪慌，

先說明一下，我并不太了解這配置朴则，沒精力去了解太多，但我覺得其中有一些關(guān)鍵的小注意點钓简，可能有些初學者不太注意到乌妒，導致配置有問題，本文章可能只對新手有點幫助外邓，如果你有好配置撤蚊，歡迎評論回復，讓大家學習损话！

Nginx的CORS配置侦啸，網(wǎng)上太多這配置了槽唾，但大家更多的復制粘貼、轉(zhuǎn)發(fā)光涂，幾乎都是類似下面這三兩行：


add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Headers X-Requested-With;

add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

這樣有用么庞萍？有用，我以前這樣使用也正常過忘闻，但后來還是遇到問題了钝计，發(fā)現(xiàn)有些項目請求就不成功，也遇到有些瀏覽器成功齐佳，有些瀏覽器不成功私恬；

我也在網(wǎng)上查找各種資料和調(diào)整寫法，最后我調(diào)整好的寫法炼吴，基本的使用沒問題本鸣，我在項目中也一直使用著！

下面發(fā)一段我實際項目中的部分配置：


location /aoda-web {

    add_header'Access-Control-Allow-Origin'$http_origin;

    add_header'Access-Control-Allow-Credentials''true';

    add_header'Access-Control-Allow-Methods''GET, POST, OPTIONS';

    add_header'Access-Control-Allow-Headers''DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X- Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

   add_header'Access-Control-Expose-Headers''Content-Length,Content-Range';

    if($request_method='OPTIONS') {

        add_header'Access-Control-Max-Age'1728000;

        add_header'Content-Type''text/plain; charset=utf-8';

        add_header'Content-Length'0;

        return204;

    }

     roothtml;

      indexindex.html index.htm;

        proxy_passhttp://127.0.0.1:8080;

        proxy_set_headerHost$host;

        proxy_set_headerX-Real-IP$remote_addr;

        proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;

        proxy_set_headerX-Forwarded-Proto$scheme;

        proxy_connect_timeout5;

}

下面簡單講解一下硅蹦，以便大家配置成功永高！

1、Access-Control-Allow-Origin提针，這里使用變量 $http_origin取得當前來源域命爬，大家說用“*”代表允許所有，我實際使用并不成功辐脖，原因未知饲宛；

2、Access-Control-Allow-Credentials嗜价，為 true 的時候指請求時可帶上Cookie艇抠，自己按情況配置吧；

3久锥、Access-Control-Allow-Methods家淤，OPTIONS一定要有的，另外一般也就GET和POST瑟由，如果你有其它的也可加進去絮重；

4、Access-Control-Allow-Headers歹苦，這個要注意青伤，里面一定要包含自定義的http頭字段（就是說前端請求接口時，如果在http頭里加了自定義的字段殴瘦，這里配置一定要寫上相應的字段）狠角，從上面可看到我寫的比較長，我在網(wǎng)上搜索一些常用的寫進去了蚪腋，里面有“web-token”和“app-token”丰歌，這個是我項目里前端請求時設(shè)置的姨蟋，所以我在這里要寫上；

5立帖、Access-Control-Expose-Headers眼溶，可不設(shè)置，看網(wǎng)上大致意思是默認只能獲返回頭的6個基本字段厘惦，要獲取其它額外的偷仿，先在這設(shè)置才能獲取它；

6宵蕉、語句“ if ($request_method = 'OPTIONS') { ”酝静，因為瀏覽器判斷是否允許跨域時會先往后端發(fā)一個 options 請求，然后根據(jù)返回的結(jié)果判斷是否允許跨域請求羡玛，所以這里單獨判斷這個請求别智，然后直接返回；

好了稼稿，按我上面配置基本都可使用（有些朋友確定只百度復制了兩行薄榛，然后說配置好了，跟前端朋友互扯）让歼，

下面發(fā)一個實際配置供參考敞恋，我做了少量更改，如下：


server{

        listen80;

        server_namexxx.com;

        location/xxx-web/papi {

        add_header'Access-Control-Allow-Origin'$http_origin;

        add_header'Access-Control-Allow-Credentials''true';

        add_header'Access-Control-Allow-Methods''GET, POST, OPTIONS';

        add_header'Access-Control-Allow-Headers''DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        add_header'Access-Control-Expose-Headers''Content-Length,Content-Range';

        if($request_method='OPTIONS') {

            add_header'Access-Control-Max-Age'1728000;

            add_header'Content-Type''text/plain; charset=utf-8';

            add_header'Content-Length'0;

            return204;

        }

       roothtml;

        indexindex.html index.htm;

        proxy_passhttp://127.0.0.1:7071;

        proxy_set_headerHost$host;

        proxy_set_headerX-Real-IP$remote_addr;

        proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;

        proxy_set_headerX-Forwarded-Proto$scheme;

        proxy_connect_timeout5;

    }

    location/xxx-web {

        add_header'Access-Control-Allow-Origin'$http_origin;

        add_header'Access-Control-Allow-Credentials''true';

        add_header'Access-Control-Allow-Methods''GET, POST, OPTIONS';

        add_header'Access-Control-Allow-Headers''DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        add_header'Access-Control-Expose-Headers''Content-Length,Content-Range';

        if($request_method='OPTIONS') {

                add_header'Access-Control-Max-Age'1728000;

                add_header'Content-Type''text/plain; charset=utf-8';

                add_header'Content-Length'0;

                return204;

    }

      roothtml;

      indexindex.html index.htm;

      proxy_passhttp://127.0.0.1:8080;

       proxy_set_headerHost$host;

        proxy_set_headerX-Real-IP$remote_addr;

        proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;

        proxy_set_headerX-Forwarded-Proto$scheme;

        proxy_connect_timeout5;

    }

    location/ {

        root/var/www/xxx/wechat/webroot;

        indexindex.html index.htm;

    }

    error_page500502503504/50x.html;

    location= /50x.html {

    roothtml;

    }

}

來源于：https://blog.csdn.net/envon123/article/details/83270277

我也說說Nginx解決前端跨域問題，正確的Nginx跨域配置（后端Nginx CORS跨域配置注盈、CORS設(shè)置晃危，后端允許跨域請求）

我也說說Nginx解決前端跨域問題，正確的Nginx跨域配置（后端Nginx CORS跨域配置老客、CORS設(shè)置僚饭，后端允許跨域請求）