使用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!');
});