vue项目上线如何处理跨域问题【原】
emer 发布于 2018-12-7 09:35 4776 次阅读
今天朋友问我个问题,为啥我的项目上线了,却遇到各种 跨域问题?这种情况该如何解决?本来这是运维应该干的,但是作为前端也了解下
首先:系统环境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或域名实现跨域