Day-02-02-CSDN博客

本文介绍了如何在IDEA中利用HTTPClient插件进行API测试，包括创建和运行测试用例，以及处理前后端跨域问题的方法，如使用@CrossOrigin注解和配置全局跨域过滤器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Httpclient测试

安装HTTP Client插件

使用IDEA自带的http接口测试工具——HTTP Client

Open in HTTP Client

生成测试用例

点击绿色箭头可以运行测试用例，控制台会输出结果。

保存和修改测试用例

在模块下新建一个api-test包用来存放测试用例，将生成的用例另外存放。

为了方便将来和网关集成测试，这里我们把测试主机地址在配置文件http-client.env.json 中配置。

{
  "dev": {
    "access_token": "",
    "gateway_host": "localhost:63010",
    "content_host": "localhost:63040",
    "system_host": "localhost:63110",
    "media_host": "localhost:63050",
    "search_host": "localhost:63080",
    "auth_host": "localhost:63070",
    "checkcode_host": "localhost:63075",
    "learning_host": "localhost:63020"
  }
}

因此将xc-content-api.http文件内容修改为

### 课程查询列表
POST http://{{content_host}}/content/course/list?pageNo=2&pageSize=10
Content-Type: application/json

{
  "auditStatus": "202002",
  "courseName": ""
}

前后端联调

前端环境准备

1. 安装node.js

2. 启动前端项目

在前端项目根目录打开cmd命令行，输入npm run serve启动项目。

有访问地址说明启动成功（http://localhost:8601/）

安装系统管理服务

在访问 http://localhost:8601/ 时，会向http://localhost:8601/system/dictionary/all发起请求，即系统管理服务，因此需要启动该工程。

解决跨域问题

解决方式一：

在Controller的类上添加@CrossOrign，允许访问该控制器方法的请求跨域。

@Slf4j
@RestController
@CrossOrigin
public class DictionaryController  {

    @Autowired
    private DictionaryService  dictionaryService;

    @GetMapping("/dictionary/all")
    public List<Dictionary> queryAll() {
        return dictionaryService.queryAll();
    }

    @GetMapping("/dictionary/code/{code}")
    public Dictionary getByCode(@PathVariable String code) {
        return dictionaryService.getByCode(code);
    }
}

解决方式二：

根据资料所提供，配置跨域过滤器，在服务端给响应头添加 Access-Control-Allow-Origin：*。编写配置文件：

/**
 * @description 跨域过滤器
 * @author vv
 * @date 2024/2/16 17:08
 * @version 1.0
 */
 @Configuration
 public class GlobalCorsConfig {

  /**
   * 允许跨域调用的过滤器
   */
  @Bean
  public CorsFilter corsFilter() {
   CorsConfiguration config = new CorsConfiguration();
   //允许白名单域名进行跨域调用
   config.addAllowedOrigin("*");
   //允许跨越发送cookie
   config.setAllowCredentials(true);
   //放行全部原始头信息
   config.addAllowedHeader("*");
   //允许所有请求方法跨域调用
   config.addAllowedMethod("*");
   UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
   source.registerCorsConfiguration("/**", config);
   return new CorsFilter(source);
  }
 }

同源策略简述：同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

举例：

从 http://locahost:8601 到 http://locahost:8602 由于端口不同，是跨域。

从 http://192.168.101.10:8601 到 http://192.168.101.11:8601 由于主机不同，是跨域。

从 http://192.168.101.10:8601 到 https://192.168.101.10:8601 由于协议不同，是跨域。