nginx解決跨域

在項目開發中，咱們很常見的一個問題是，本地是localhost開發的，接口通常是給IP地址，例如http://192.168.13.14/api, 這樣直接在項目中調用接口 瀏覽器會報跨域錯誤， 由於localhost和http://192.168.13.14並非同源的。

通常咱們的解決方法是在webpack中設置代理，配置devServer:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.13.14/api',
                changeOrigin : true
            }
        }
    }
}

設置之後，在接口訪問 假設爲http://localhost:8080/api時，會轉發到http://192.168.13.14/api去.

因此，若是不是經過devServer的方式，該怎麼作呢？

接手的項目就沒有配置webpack devServer，仔細看是設置了Access-Control-Allow-Origin: http://localhost:8054來解決接口跨域的，可是，這個項目的鑑權方式是cookie, 這裏地址http://localhost:8054和接口地址==不一樣源致使cookie設置失敗==

那麼如今的想法要讓瀏覽器地址與接口地址同源，那麼cookie天然可以設置成功了！

能夠經過配置nginx來實現。

配置：

server {
    listen 8055 {
        // 步驟1 
        location / {
            proxy_pass: http://localhost:8054/;
        }
        // 步驟2
        location /api {
            proxy_pass: http://192.169.13.14;
        }
    }
}

我訪問的地址原本是http://localhost:8054, 這裏我監聽8055端口。

• 步驟1 作地址的代理，當訪問http://localhost:8055時，會映射到http://localhost:8054
• 步驟2 作接口的代理，當訪問http://localhost:8055/api/xxxx時，會映射到http://192.169.13.14/api/xxxx

• 還有一步，在項目中，要動態配置接口地址：

  const apiAddress = window.location.protocol + '//' + window.location.host + '/api';

這樣，瀏覽器地址與接口地址就都是localhost:8055開頭的，不存在跨域的問題，cookie就能成功設置