前端的全局请求配置和后端的yml文件配置api

程序员jin
360 阅读4分钟

一.后端的yml文件中配置"/api"

1.1 yml文件中配置 servlet: context-path: /api的作用

context-path:上下文路径

在Spring Boot应用中，servlet.context-path用于设置应用的上下文路径，即应用的根URL路径。设置context-path: /api意味着，应用中的所有路径都将在/api后面，比如访问首页可能是http://localhost:8080/api/。

以下是一个简单的例子，展示如何在application.yml文件中配置servlet.context-path:

server:
  port: 8080
  servlet:
  context-path: /api

在这个配置下，应用将会监听8080端口，并且所有的请求都会被映射到/api路径下。例如，如果你有一个控制器映射到/，那么实际的访问路径将是http://localhost:8080/api/。

1.2 yml文件中没有配置 servlet: context-path

启动application;浏览器中打开"http://localhost:8082/doc.html"，即可打来在线文档；浏览器中打开"[localhost:8082/api/doc.html](http://localhost:8082/api/doc.html)"会报错。

1.3 yml文件中配置 servlet: context-path

定义： server.servlet.context-path=## 应用的上下文路径，也可以称为项目路径，是构成url地址的一部分。

server.servlet.context-path不配置时，默认为 / ，如：localhost:8080/xxxxxx xxxxxx为controller上的路径

当server.servlet.context-path有配置时，比如 /demo，此时的访问方式为localhost:8080/demo/xxxxxx

1.4 配置 servlet: context-path: /api

启动application;浏览器中打开"http://localhost:8082/api/doc.html"，即可打开在线文档；浏览器中打开"http://localhost:8082/doc.html"会报错。

1.5 注意事项

  1. 访问
servlet:
  context-path: /api

添加上面配置后，并不意味着输入http://localhost:8080后就自动在后面添加"/api";而是在controller上的路径前面添加"/api"才可以正常访问controller中的路径。

在线文档访问的就是controller中请求响应的内容。

  1. 查看

通过查看运行后是否有下面的代码判断是否执行

Tomcat started on port(s): 8082 (http) with context path '/api'
  1. 报错
servlet:
  context-path: /api

添加后出现下面报错

Tomcat started on port(s): 8082 (http) with context path ''

这条信息表明Tomcat服务器已经在端口8082上启动，并准备接收HTTP请求。这通常是Tomcat的默认HTTP端口。信息还提到了context path，这是指Tomcat中web应用的访问路径。在这个信息中，context-path是空的，意味着web应用的根目录将会映射到http://localhost:8082；不需要添加"/api"。

报错原因：

从Spring Boot 2.0开始，应该用**server.servlet.context-path**配置。

如下配置：

server:
  port: 8082
  servlet:
    context-path: /api

启动application

Tomcat started on port(s): 8082 (http) with context path '/api'

二. 修改前端的全局请求配置文件

2.1 配置域名

2.1.1 xxx.com

如上执行时，添加新账户时浏览器url报错如下：

域名可以理解成平替IP；一定要写全http和/api

2.1.2 xxx.com

如上执行时，添加新账户时浏览器url报错如下：

因为nginx中配置有"/api"反向代理

只有后面有/api时才可以代理到后端。

2.1.3 xxx.com/api

域名可以理解成平替IP；一定要写全http和/api

2.1.3 xxx.com/api

上面配置后，正常访问

但是新建用户时，会报出无权限。

此时，需要先使用在线文档新建一个账户；然后使用新建用户登录后便拥有了权限，一切操作正常。

2.2 配置服务器IP

  1. 前端的全局请求配置文件中线上url的配置与上面域名的配置相互对应。
  2. 线上访问的url地址应该是前端的地址，如同上面的域名，切记不要设置成为了后端。

三. 配置和上线上传的注意事项

  1. 线上访问的url地址应该是前端的地址，如同上面的域名，切记不要设置成为了后端。

  2. 域名如果没有泛解析，输入域名www.###.com，如果进行了泛解析，输入泛解析域名###.com即可访问；但是在前端的全局请求配置文件中必须配置xxx.com/api

  3. 一定要写全http和/api；否者一定会报错。

  4. nginx反向代理，在宝塔面板中前端配置下面代码：

location /api {
  proxy_pass  http://127.0.0.1:8081;
  proxy_set_header Host $proxy_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_buffering off;
  proxy_set_header Connection "";
}

    location / {
try_files $uri $uri/ /index.html;
}
  1. 打包上传。

后端在打包前，先clean，然后再打包生成jar包；前端直接打包生成dist文件，直接默认替代以前的dist，不需要删除再打包。

  1. 宝塔项目的根目录

同一个项目需要再次打包重新上传时，只需要将更目录对应的文件更换即可，刷新页面，一直正常，不需要删除项目，重新再创建。

四. 异常

4.1 宝塔nginx部署前端页面刷新报404

在前端在nginx配置文件中的http->server->location中添加以下代码，完美秒杀。

location / {
try_files $uri $uri/ /index.html;
}

4.2 前端没有携带 cookie 导致后端识别不到

前端 axios 是否开启了 withCredentials=true

4.3 后端关于 springboot 的 server.servlet.session.cookie.domain 域定位怎么设置？

没有域名就是服务器IP

http 环境就不要使用 secure 和samesite

server:
  servlet:
    session:
      cookie:
        domain: 域名或者IP

4.4 宝塔面板跨域

4.4.1 前端

前端请求地址和前端运行地址一致 也就是前端 baseURL 请求 192.168.196.158:8000 具体参考自己运行地址

4.4.2 后端

server
{
    listen 80;
    server_name 前端 IP 比如 126.4.3.3;
    root 前端路径;

    location /api {
      proxy_pass  http://127.0.0.1:后端端口;
      proxy_set_header Host $proxy_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_buffering off;
      proxy_set_header Connection "";
    }


    # 这个要写在下面！
    location / {
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

4.5 为什么后端配置了 @CrossOrigin 注解还是会报错？

在后端的 @CrossOrigin 注解加 allowCredentials="true"。

avatar
文章
阅读
粉丝