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

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])
        //     })
        //   } 
        }
      }
    }
  }
}
配置根据个人接口不同,实现不同,比如我们实际请求vr.lininn.cn/api/getlist下的接口内容,我们就不需要path的rewrite功能,如果我们需要请求实际接口是vr.lininn.cn/getlist的话,我们需要rewrite功能,将api重写为空,那么我们需要上面的配置


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

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

第一种:相同域名处理

我们知道如果我们的服务在相同的域名下我们就不涉及到跨域,所以我们可以用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或域名实现跨域



分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论