使用nginx 解决开发过程中的跨域问题

遇到的问题

在开发vue 前端程序时，我们会创建多个项目，比如用户管理为一个应用，系统管理为一个应用，这样多个应用势必需要开多个端口，这样问题就来了，我们在登录后会生成一个token，这个token我们会存到浏览器的localstorage 中，这样 token 在不同的应用中就不能共享了，希望在登录后，不同的应用都能读到这个token。

 

解决方案

我们可以使用nginx 来解决这个问题，利用nginx 的反向代理功能，我们可以通过不同的上下文路径，将请求转发到不同的应用，这样我们可以通过一个域名访问到不同的应用，这样跨域的问题自然就解决了。

nginx 配置文件配置如下：

location /jpaas {
             proxy_set_header Host       $host;
             proxy_pass http://localhost:8002;
        }
        
        location /api/ {
             proxy_set_header Host       $host;
             proxy_pass http://localhost:9900/;
        }

这样我们通过访问 /jpaas/ 就将请求转发到 http://localhost:8002/jpaas

注意proxy_pass 的配置，注意后面是否带 / 

如果不带 / 请求会转发到 http://localhost:port/上下文

如果带 / 请求会转发到 http://localhost:port ,不包含上下文。

 

VUE程序改造

因为应用默认是没有上下文的，因此我们需要对程序一些修改：

比如修改 vue.config.js

const vueConfig = {
  publicPath: "/jpaas",

默认是没有 这个 publicPath 的，我们增加一个。

另外 proxy 也可以去掉：

devServer: {
    // development server port 8000
    port: 8002,
    /*
    proxy: {
      '/api': {
         //target: 'http://139.186.65.108:9900',
         //target: 'http://129.28.157.247:9900',
        target: 'http://localhost:9900',
        pathRewrite: { '^/api': '' },
        ws: false,
        changeOrigin: true
      }
    }*/
  },

这里的proxy 是可以注释掉的，他的意思是将使用 /api 的请求转发到 后端的网关，因为我们在上面统一通过nginx 来处理，所以这里我们 就不再需要这个这个来处理跨域的问题。

修改路由配置

export default new Router({
  mode: 'history',
  base: "/jpaas",
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

这里增加一个base。

这样 我们通过一个nginx 就实现了 多个应用的跨域问题。