SpringBoot2.1.12.RELEASE + VUE 2.6.11 详解前后端分离跨域配置及nginx部署只需要这一篇

最新推荐文章于 2023-03-05 18:45:24 发布

风随心飞飞

最新推荐文章于 2023-03-05 18:45:24 发布

阅读量419

点赞数

分类专栏： SpringBoot +VUE 系列文章标签： node.js java spring

本文链接：https://blog.csdn.net/u014212540/article/details/111512544

版权

SpringBoot +VUE 系列专栏收录该内容

44 篇文章 2 订阅

订阅专栏

背景介绍：

最近在做前后端分离项目，开发的时候在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;
        }
        }