使用Proxy_cookie_domain實現全站跨域

一、什麼是Proxy_cookie_domain

Proxy_cookie_domain是一個Nginx的指令，用於在跨域情況下在服務器端修改cookie中的domain，實現服務之間的cookie共享。此指令會在將響應發送到客戶端之前，將請求頭中的cookie中的指定domain的cookie修改為指定的域名。

例如，在A域名下，想要訪問B域名下的服務，但是服務器端設置了CORS策略，不允許跨域訪問，而同時需要進行cookie認證，這時候就可以使用Proxy_cookie_domain，在經過Nginx代理後，修改請求頭中的cookie中的domain為B域名，實現查詢B域名下的服務，並且在該服務下進行cookie認證。

二、實現步驟

1、安裝Nginx

首先，需要安裝Nginx。可以在Linux系統下使用apt-get或者yum進行安裝，也可以從Nginx官網上下載最新穩定版的Nginx並進行編譯安裝，具體安裝方法可以參考Nginx官方文檔。

2、在nginx.conf中配置Proxy_cookie_domain

location / {
    proxy_pass http://example.com/;
    proxy_cookie_domain example.com other.example.com;
}

如上所示，通過Proxy_cookie_domain設置域名轉換的規則。在這個例子中，兩個域名example.com和other.example.com將共享cookie。

3、重啟Nginx

完成上述配置後，需要重啟Nginx以使配置生效。

三、注意事項

1、跨域請求的Content-Type需要設置為application/x-www-form-urlencoded或者multipart/form-data

2、在做Ajax請求時，需要加上withCredentials屬性

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open("GET", "http://example.com/", true);
xhr.send();

3、如果需要在JavaScript中讀取cookie，需要將cookie的domain和path設置為頂級域名和根路徑。

document.cookie = "name=value; domain=example.com; path=/";

四、代碼示例

以下是一個完整的使用Proxy_cookie_domain實現全站跨域的代碼示例。

在本例中，我們使用Vue.js框架作為前端開發框架，使用Node.js作為後端開發環境。

前端代碼：

// main.js
import axios from 'axios';

axios.defaults.withCredentials = true;

new Vue({
  el: '#app',
  data() {
    return {
      message: ''
    };
  },
  methods: {
    loadData() {
      axios.get('http://api.example.com/data').then((response) => {
        this.message = response.data;
      });
    }
  }
});

後端代碼：

// index.js
const express = require('express');
const cookieParser = require('cookie-parser');
const cors = require('cors');

const app = express();

app.use(cookieParser());
app.use(cors({
  credentials: true,
  origin: 'http://localhost:8080'
}));

app.get('/data', (req, res) => {
  res.cookie('name', 'value', { domain: 'api.example.com', path: '/' });
  res.send('Hello World');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});