背景介绍:
最近在做前后端分离项目,开发的时候在devServer 里面配置了跨域访问后端可以访问,可是通过nginx 部署的时候和开发时有很大的区别,我就把最近遇到的问题一一分项给各位小伙伴,喜欢的朋友可以关注一下我,我会不定期给大家带来开发上的心得体会哦!
基础知识补漏
这一块针对有技术盲区的小伙伴,掌握的小伙伴可以跳过哦
Nginx Location指令URI匹配规则详解
可以参考Ningx URI匹配规则
我只对此篇博文做下总结:
(1)匹配的总的原则:先普通再正则;先精确再模糊
(2)精确匹配前边带等号,模糊不带;
(3)location指令分为两种匹配模式:
- 普通字符串匹配:以=开头或开头无引导字符(~)的规则
- 正则匹配:以~或~*开头表示正则匹配,~*表示正则不区分大小写;
- location ~ /test/.+.jsp$ { … } :正则匹配,支持标准的正则表达式语法。
- location ^~ / { … } : ^~意思是关闭正则匹配,当搜索到这个普通匹配模式后,将不再继续搜索正则匹配模式。
开发模式下的前后端分离 跨域转发配置
vue.config.js 里面:
devServer: {
disableHostCheck: true,
port: 800,
open: true,
proxy: {
'^~/api': {
target: 'http://localhost:8080/api',
// ws: false,
changeOrigin: true,
pathRewrite: {
'^/api': ''// 重写,
}
}
}
},
后端服务
server:
address: localhost
port: 8080
servlet:
context-path: /api
uri-encoding: utf-8
# session:
# timeout: 30m
compression:
enabled: true
mime-types: application/javascript,text/css,application/json,application/xml,text/html,text/xml,text/plain
注意: js 里 target: ‘http://localhost:8080/api’ 要和后端里的
adress 、port、context-path 对应
Ningx 项目上线部署
defaultSetting.js 里配置
baseURL: {
dev: 'http://localhost:8080/api',
pro: 'http://xxx:800/api'
}
nginx.config 里配置:
server {
listen 800;
location ^~ /api{
#proxy_set_header Host api.yourhost.com;
proxy_pass http://127.0.0.1:8081/api/;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
**注意:**defaultSetting.js 里面的http://xxx:800/api 要是“前端地址+/api",nginx.conf 里面proxy_pass http://127.0.0.1:8081/api/ 是
”后端接口“+ 服务部署文件路径(Tomcat 里非ROOT)