Spring Cloud Practical Project: Environment Setup, Menu Creation, Frontend Generation, Gateway Configuration and CORS Resolution

1. Environment Preparation

Copy the renren-fast-vue code into your own frontend project, install node modules with cnpm install, start the frontend portal using npm run dev, then launch the backend RenrenApplication and log in.

2. Add Menu and Directory

Add a top‑level menu named Question Center and a sub‑menu Type Maintenance. After refreshing the page the new menus appear and two records are inserted into the sys_menu table.

3. Auto‑generate Frontend Pages

Use renren-generator to generate the front‑end code, copy the question directory to src/views/modules, and the generated Vue pages are displayed.

4. Test Type Maintenance Functionality

Initially the request

http://localhost:8080/renren-fast/question/type/list?t=1587825969456&page=1&limit=10&key=

returns 404 because the request is sent to the wrong service.

5. Integrate Spring Cloud Gateway

Configure the gateway to route requests to the appropriate micro‑services. Example route configuration (in application.yml) forwards /api/** to the renren-fast service and rewrites the path:

spring:
  cloud:
    gateway:
      routes:
        - id: route_portal
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:
            - RewritePath=/api/(?<segment>.*),/renren-fast/${segment}

6. Configure Request to Gateway

In static/config/index.js replace the base URL with the gateway address and add the api prefix:

window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast'; // original
// replace with
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8060/api'; // gateway + api

7. Solve CORS Issues

Add a global CORS filter in the gateway ( PassJavaCorsConfiguration.java) that allows all origins, headers, methods and credentials, then comment out the original CORS configuration in renren-fast. After this the login request succeeds and the response contains the proper CORS headers.

package com.jackson0714.passjava.gateway.config;

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;

@Configuration
public class PassJavaCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // allow all
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsWebFilter(source);
    }
}

8. Register renren‑fast Service with Nacos

Add the common dependency:

<dependency>
    <groupId>com.jackson0714.passjava</groupId>
    <artifactId>passjava-common</artifactId>
    <version>0.0.1-SNAPSHOT</version>
</dependency>

Configure Nacos discovery address:

cloud:
  nacos:
    discovery:
      server-addr: 127.0.0.1:8848

Set the application name and enable discovery:

application:
  name: renren-fast

// in the main class
@EnableDiscoveryClient

Verify that the service appears in the Nacos console.

9. Add Gateway Route for Question Service

Define a route that forwards /api/question/** to the passjava-question service:

spring:
  cloud:
    gateway:
      routes:
        - id: route_question
          uri: lb://passjava-question
          predicates:
            - Path=/api/question/**
          filters:
            - RewritePath=/api/(?<segment>.*),/${segment}

Place more specific routes higher in the list to ensure correct matching.

10. Test Type Maintenance Functionality

Insert three test records into the database, then verify list, update (e.g., change logo to value 23) and delete operations through the UI. All changes are reflected in the database.

11. Next Steps

Future articles will cover logical deletion, adding new types, and creating new questions.