【VUE + SPA】接口跨域, 携带cookie 的解决方案

背景

因为历史缘由，一个站点须要作成彻底的SPA应用是很是困难的, 但咱们能够在一些比较独立的业务中使用SPA, 每一个SPA应用相互独立. 这样在用webpack打包的时候实际上是会加快效率，同时不一样的业务的依赖也能够不同, 方便之后维护.

思考

当我在使用 vue + webpack 开发单页面的时候，主机host是 localhost, 端口是 8080(可自行更改). 但个人本地开发站点 在其它的linux 主机上, 并且使用 nginx 进行了代理.
站点里面已经存在了其它业务， 若是我在本身机器上开发，那么如何去调用访问这个站点的接口呢?

代理转发

若是你使用的是 vue-cli 进行初始化项目， 好比：

vue init webpack new-project

那么在config/index.js 下能够修改 dev.proxyTable

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    onProxyReq (proxyReq, req, res) {
    }
  }
}

实际上这是由于脚手架使用了中间件 http-proxy-middleware

源地址	转发地址
localhost:8080/api	api.example.com/api
localhost:8080/api/notifications	api.example.com/api/notifications

若是咱们要去掉 api.example.com的api路径？

设置 pathRewrite

proxyTable: {
  '/api': {
    target: 'http://api.example.com',
    changeOrigin: true,
    pathRewrite: '^/api' : '',
    onProxyReq (proxyReq, req, res) {
    }
  }
}

源地址	转发地址
localhost:8080/api	api.example.com
localhost:8080/api/notifications	api.example.com/notifications

代理的好处:

1. 解决开发时跨域问题

代理的问题：

1. 代码须要设置环境变量，prod环境下不存在 http-proxy-middleware 中间件

携带Cookie

若是我想拥有 www.example.com 或 *.example.com 下的 cookie 进行模拟请求.

本地host	线下域名
localhost:8080	www.example.com

能够利用 nginx + host 进行转发配置
本地配置 host

127.0.0.1 www.example.com

配置 linux 机器的 nginx.conf

http: {
    server： {
        listen 80;  
        server_name www.example.com;
        location / {
        }
        location /project_name { # 指定发布时的路径, 如 /profile
           proxy_pass http://xxx.xxx.xxx.xxx:8080; # 你的主机IP
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

只要你访问 www.example.com/profile 就能访问到 你正在开发的SPA 应用了

虽然这样可以解决问题，不过这样就会带来 nginx 的配置, 然而这在上线的时候又不是必备的.

虽然我用过 fiddler4, 但我发现了一个更简单的配置工具，叫作 whistle. 具体使用能够在github官网去搜索学习.

whistle 是由nodejs开发的工具，他能作的东西有不少，能够查看报文，注入代码。自带了weinre 调试工具, 再配合whistle 的 chrome 插件. 就能够很快的进行配置host, 以及基本的代理了.

安装 whistle

npm install -g whistle
whistle.cmd

他会启动一个端口，访问站点。而后配置 rules

咱们就能够经过访问 www.example.com/profile 进行访问咱们的单页面应用了, 这样请求就能携带咱们www.example.com 下面的cookie了

小结

以上是我的的开发经验， 若是你有更好的解决方案。欢迎提出来一块儿讨论一下!!

相关项目及地址

• vue

• webpack

• vue-cli

• vuejs-templates/webpack

• whistle