vue项目上线如何处理跨域问题【原】
首页 > >    作者:lininn   2018年12月7日 9:35 星期五   热度:1902°   百度已收录  
时间:2018-12-7 9:35   热度:1902° 

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

首先:系统环境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或域名实现跨域



二维码加载中...
本文作者:lininn      文章标题: vue项目上线如何处理跨域问题【原】
本文地址:?post=273
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn