vue项目上线如何处理跨域问题【原】

今天朋友问我个问题，为啥我的项目上线了，却遇到各种 跨域问题？这种情况该如何解决？本来这是运维应该干的，但是作为前端也了解下

首先：系统环境centOs 7.2 nginx用于服务，版本1.14.1

在本地开发Vue项目时候我们会经常涉及到跨域问题，我们经常会用vue的 反向代理实现如下：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:3010',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        onProxyReq (proxyReq, req, res) {
          originHost = req.headers['x-forwarded-for']
          const cookie = req.headers['cookie']
          if (cookie) {
            proxyReq.setHeader('cookie', cookie)
          }
        },
        onProxyRes(proxyRes, req, res) {
        //   if (proxyRes.headers['set-cookie']) {
        //     // 域名信息与实际业务相关
        //     proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map(v => {
        //       return v.replace('domain=.mufeng.me', 'domain=' + originHost.split(':')[0])
        //     })
        //   } 
        }
      }
    }
  }
}

同理我们项目上线时候也会遇到这样的问题：

基本我们会遇到跨域问题处理方法两种，

第一种：相同域名处理

我们知道如果我们的服务在相同的域名下我们就不涉及到跨域，所以我们可以用nginx的反向代理来实现这个功能，原理是把所有的api请求反向代理到服务器，如下：

server {
       listen       80;
        server_name  vr.lininn.cn;

   location /{
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass     http://127.0.0.1:3002;
    # alias  /web/node/;
     }
    location /api/{
    proxy_pass  http://127.0.0.1:3005/;
        }
}

上面代码就是实现方法，注意proxy_pass的结尾是否有/，决定了是否带上匹配路径，相当于vue的反向代理，有/则请求的是服务器127.0.0.1:3005/get

没有/请求的是127.0.0.1:3005/api/get

这是相对于同域名反向代理方法实现的，另一种方法是直接请求不同域名，在不同域名情况下，我们就配置服务器允许相应的ip或域名实现跨域