vue项目代理配置+使用nginx部署的请求代理配置
由于vue项目的前后端分离,代码里的请求基本上都会涉及跨域,所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目,而接口是运行在其他服务上的,那么nginx同样也需要配置代理,当然,如果前端项目跟接口是运行在同一个服务上,这种情况就只需要配置开发环境就行。以下是使用nginx部署打包好的vue项目,而后端接口使用其他服务部署的vue配置以及nginx配置开发环境使用vue-cli2版本
·
由于vue项目的前后端分离,代码里的请求基本上都会涉及跨域,所以有必要在项目中配置代理地址。如果是使用nginx部署前端项目,而接口是运行在其他服务上的,那么nginx同样也需要配置代理,当然,如果前端项目跟接口是运行在同一个服务上,这种情况就只需要配置开发环境就行。
以下是使用nginx部署打包好的vue项目,而后端接口使用其他服务部署的vue配置以及nginx配置
开发环境
使用vue-cli2版本创建的vue项目
在 config/index.js 文件内配置以下代码
module.exports = {
dev: {
proxyTable: {
'/api':{
// 目标地址
target:'http://10.200.8.55:8080',
// 是否允许跨域
changeOrigin:true,
// 将路径中的 '/api' 替换成 ''
pathRewrite: {
'^/api': ''
}
}
}
},
...
}
使用vue-cli3版本创建的vue项目
在 vue.config.js 中配置以下代码
// vue.config.js
module.exports = {
// 选项...
devServer: {
proxy: {
'/api': {
// 目标地址
target: 'http://172.16.100.231:8088',
ws: true,
// 设置允许跨域
changeOrigin: true,
pathRewrite: {
//把访问路径中的/api替换掉
'^/api': ''
}
}
}
},
...
}
项目中请求的地址
url: '/api/...'
生产环境
使用nginx部署项目
server {
#监听端口
listen 80;
#服务运行地址
server_name 127.0.0.1;
#charset koi8-r;
#access_log logs/host.access.log main;
#设置允许跨域
#add_header Access-Control-Allow-Origin *;
#add_header Access-Control-Allow-Methods POST,GET,OPTIONS;
#add_header Access-Control-Allow-Headers Authorization;
#静态资源目录
root home/dist;
location / {
index index.html index.htm;
#配合vue-router的history模式
try_files $uri $uri/ @router;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#vue项目中的请求地址前面都需要加上api
#发起请求的代理配置,地址包含/api的回全部替换地址并转发到proxy_pass下的地址
location /api/ {
rewrite ^/b/(.*)$ /$1 break;
proxy_pass http://172.16.100.231:8088/;
}
...
}
更多推荐
已为社区贡献3条内容
所有评论(0)