vue项目代理配置+使用nginx部署的请求代理配置 |
您所在的位置：网站首页 › 修改代理地址需要什么 › vue项目代理配置+使用nginx部署的请求代理配置 |
|
由于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 cli官方文档 // 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/; } ... } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |