项目上线出现跨域问题解决

一个项目完成之后，准备部署一个项目到新买的服务器上，测试一下效果，结果出现了习以为常的跨域问题，非常damn疼的是，本地测试的时候，跨域问题明明已经由后端解决了，没有跨域问题，这个时候通过后端接口开放进行测试，发现后端线上项目没有问题，说明问题出在前端项目上……

测试

这个时候，就去问问度娘，发现大家都是通过配置生产环境的方式进行解决线上跨域的方式，这步我并没有做到位，正式项目需要每个环境都配置到位。

生成的封面

前端项目配置各类环境（Vue+Ts）

  1. 创建环境变量配置文件 .env.production、.env.development、.env.test 先配置这三个个环境

    1
    2
    3
    4
    5
    6
    7
    8
    # 模式
    NODE_ENV = 'development'

    # 通过mode 来区分环境变量
    VUE_APP_MODE = 'development'

    # 开发环境访问后端接口api 目标服务接口地址，这个地址是按照你自已环境来的
    VITE_APP_API_URL = 'http://localhost:7109/api'
    1
    2
    3
    4
    5
    6
    7
    8
    # 模式
    NODE_ENV = 'production'

    # 通过mode 来区分环境变量
    VUE_APP_MODE = 'production'

    # 生产环境访问后端接口api  线上地址
    VITE_APP_API_URL = 'http://139.196.225.209:7109/api'

  2. 然后再在请求接口的地方进行获取请求后端接口url地址

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // ts中无法通过process 来获取env变量
    const api_rul = import.meta.env.VITE_APP_API_URL

    console.log(api_rul)

    // 创建 axios 实例
    const service = axios.create({
        baseURL: api_rul, // API 的 base_url
        timeout: 5000 // 请求超时时间
    });

  3. 配置ip和本地端口

    1
    2
    3
    4
    5
    6
    7
    8
    // https://vite.dev/config/
    export default defineConfig({
      plugins: [vue()],
      server: {
        host: '0.0.0.0',
        port: 7009,
      }
    })

这样就能根据配置的后端请求接口根据不同的环境进行区分

后端配置各类环境

  1. 额外创建三个配置文件，除默认的配置文件application.yml外

    • 默认配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # spring 配置
    spring:
      # 默认 dev 环境
      profiles:
        active: dev

    # 服务配置
    server:
      address: 0.0.0.0
      port: 8000 # 【】记得换端口
    • dev环境
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    # spring 配置
    spring:
      application:
        name: znxs # 【】项目名称
      # 数据库配置
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/pro_znxs # 【】项目数据库
        username: root # 【】配置数据库用户名
        password: root # 【】配置数据库密码
      # 支持 swagger3
      mvc:
        pathmatch:
          matching-strategy: ant_path_matcher
      # 文件上传
      servlet:
        multipart:
          # 大小限制
          max-file-size: 10MB

      # 用于限流 redis
      redis:
        database: 2
        host: localhost
        port: 6379
        timeout: 5000
        password: 123456 # 【】有密码配置密码
      # RabbitMQ 配置
      rabbitmq:
        port: 5672
        host: localhost
        password: guest
        username: guest
        virtual-host: /



    # 服务配置
    server:
      address: 0.0.0.0
      port: 8000 # 【】这里记得换端口
      servlet:
        context-path: /api
        # cookie 30 天过期
        session:
          cookie:
            max-age: 2592000  # 256mb


    # mybatis plus 配置
    mybatis-plus:
      configuration:
        map-underscore-to-camel-case: false
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
      global-config:
        db-config:
          logic-delete-field: isDelete # 全局逻辑删除的实体字段名
          logic-delete-value: 1 # 逻辑已删除值（默认为 1）
          logic-not-delete-value: 0 # 逻辑未删除值（默认为 0）
    • prod环境 该线上环境需要更换线上地址
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    # spring 配置
    spring:
      application:
        name: znxs # 【】项目名称
      # 数据库配置
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/pro_znxs # 【】项目数据库  【!】配置线上地址
        username: root # 【】配置数据库用户名
        password: root # 【】配置数据库密码
      # 支持 swagger3
      mvc:
        pathmatch:
          matching-strategy: ant_path_matcher
      # 文件上传
      servlet:
        multipart:
          # 大小限制
          max-file-size: 10MB

      # 用于限流 redis
      redis:
        database: 2
        host: localhost # 【!】配置线上地址
        port: 6379
        timeout: 5000
        password: 123456 # 【】有密码配置密码
      # RabbitMQ 配置
      rabbitmq:
        port: 5672
        host: localhost
        password: guest
        username: guest
        virtual-host: /



    # 服务配置
    server:
      address: 0.0.0.0
      port: 8000 # 【】这里记得换端口
      servlet:
        context-path: /api
        # cookie 30 天过期
        session:
          cookie:
            max-age: 2592000  # 256mb


    # mybatis plus 配置
    mybatis-plus:
      configuration:
        map-underscore-to-camel-case: false
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
      global-config:
        db-config:
          logic-delete-field: isDelete # 全局逻辑删除的实体字段名
          logic-delete-value: 1 # 逻辑已删除值（默认为 1）
          logic-not-delete-value: 0 # 逻辑未删除值（默认为 0）
    • test测试环境同理

  2. java启动命令 配置添加一句话

    1
    --spring.profiles.active=prod

后端配置跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;

import java.util.Arrays;

/**
 * 处理跨域
 */
@Configuration
public class CorsConfig {

    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*");
        config.setAllowCredentials(true);
        // todo 实际改为线上真实域名、本地域名
        config.setAllowedOriginPatterns(Arrays.asList("*"));
        config.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}