MailChimp（多账号转换）使用Nginx 解决跨域

需求：

舍不得肝mailchimp会员，目前mailchimp只支持一个通讯录了，面对发送多种类型不同用户的操作变得麻烦。
只好申请多个账号，用来切换，发送不同的邮件。

遇到问题：

前端用的vue,本来想的好好的，vue.config.js设置代理，避免跨域，直接调用mailchimpApi就好了，然而,涉及到添加新的账号的时候问题来了，vue.config.js跨域项目打包后不能修改，总不能每次都重新打包吧，只好做代理转发；

步骤1：

• 服务器一个，我用的是Ubuntu的
• nginx下载好

步骤2：

对前端的请求及响应进行了代理转发，

add_header
Nginx响应数据时，要告诉浏览器一些头信息，就要使用add_header。例如跨域访问

location /mailchimp{
      # 服务器默认是不被允许跨域的。给Nginx服务器配置`Access-Control-Allow-Origin *`后，
      # 表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。
      add_header Access-Control-Allow-Origin * always;
      # 允许的请求类型
      add_header Access-Control-Allow-Methods POST,PUT,OPTIONS;
      # 防止前端报错请求头字段内容类型不允许
      add_header Access-Control-Allow-Headers Content-Type;
      
      # 防止Nginx处理复杂请求，拒绝预检请求OPTIONS。 
      if ($request_method = OPTIONS) {
         return 204;
      }
      # 通过 $request_uri ，获得前端传递的参数usId(leg:us10)
      if ($request_uri ~ /mailchimp/us(\d+)/(.+)){
         set $proxy_api $1;
      }
      # 一开始以为需要设置请求头，发现有没有一样，看来前端写好的请求直接被转发了
      # proxy_set_header Authorization "apikeyi $proxy_api";
      #rewrite 指令进行 URL 重写，运用正则
       rewrite /mailchimp/us(\d+)/(.+)$ /3.0/$2 break;
      #  代理转发到指定的网址
      proxy_pass https://us$proxy_us.api.mailchimp.com;

    }

步骤3：

前端发起请求，我用的是vue+axios

axios({                url: "mailchimp（这是nginx触发条件）/" + 你的API-US码 + "/campaigns（这里是请求体）",                method: "post",                data: jsons,

               let jsons = {                 //你的数据            };
                header: {                    "Content-Type": "application/json" //如果写成contentType会报错                },                auth: auth,                baseURL: '/mapi'  //vue跨域连接自己服务器,vue.config.js设置            })                .then(res => {                    if (res.status == 200) {                        console.log(res)                                          }                })                .catch(function(error) {                                    });

vue.vonfig.js文件

devServer: {        /* 自动打开浏览器 */        open: true,        port: 8089,        https: false,        /* 使用代理 */        proxy: {            "/mapi": {                /* 目标代理服务器地址 */                target: "http://10.xxx.xxx.xx:5678",                /* 允许跨域 */                changeOrigin: true,                pathRewrite: {                    "^/mapi": ""//这里理解成用'/mapi'代替target里面的地址,                }            },        }

完成！