nginx解決跨域

一、跨域是什麼

跨域，顧名思義就是訪問不同域名的資源。同源策略指的是，只有協議、域名、埠都相同的兩個頁面才能進行數據交互。而跨域產生的原因就是由於瀏覽器的同源策略限制了網頁從一個域訪問另一個域的資源，所以跨域就成為了一個問題。

二、跨域表現形式

跨域有多種表現形式，例如Ajax跨域讀取數據、JSONP、Web消息推送以及跨域資源共享(CORS)等。

其中，Ajax跨域讀取數據指的是在瀏覽器端使用Ajax請求獲取不同域名的資源；JSONP是一種通過動態創建標籤實現跨域的方式；Web消息推送是一項HTML5規範，可以允許網頁通過跨域方式推送消息；而CORS則是一種新型的跨域解決方案。

三、nginx解決跨域

當然，在眾多的跨域解決方案中，nginx也可以作為一種跨域解決方式。以下是一些使用nginx進行跨域解決的方法：

四、使用proxy_pass

location /api/ {
    proxy_pass http://api.example.com/;
    add_header 'Access-Control-Allow-Origin' '*';
}

使用proxy_pass可以直接指定一個目標地址，可以在訪問一個介面時候，直接由Nginx代理到另一個埠或另一個域名。

五、使用add_header

location /api/ {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://api.example.com/;
}

在使用proxy_pass的同一時刻，可以通過使用add_header，設置Access-Control-Allow-Origin，來達到跨域的效果。這樣可以在客戶端直接使用ajax等方式請求數據，而不必擔心跨域問題。

六、使用lua腳本

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    proxy_pass http://api.example.com/;
}

除了使用proxy_pass和add_header外，還可以使用lua腳本來進行跨域解決。在nginx.conf的http段內加上以下代碼：

http {
    lua_shared_dict cors 1M;
    init_by_lua_block {
        local cors = require "cors"
        cors.init()
    }
}

這段代碼聲明了一個共享內存，然後通過調用cors.lua文件里對應的方法來解決跨域問題。

七、總結

通過上述出現的幾個方法，我們可以看出，nginx作為一種跨域解決方案採用起來非常靈活。提供了多種方式來解決跨域問題，使得我們能夠根據自己的需要進行選擇。無論是通過proxy_pass、add_header、還是使用lua腳本，都可以輕鬆的達到跨域解決的目的。