模仿postman自研的HTTP Client Chrome插件，可绕过浏览器同源政策发起跨域请求

文章目录

1、项目背景

在企业开发过程中，有时候需要手动调用线上服务的接口，我们的服务是通过cookie来保存登录态的，且接口做了身份验证，此时有两种情况：

1. 接口是GET类型，则可以直接在浏览器地址栏输入接口地址即可访问
2. 接口是POST或其它类型，则不能在浏览器地址栏直接访问

对于情形2，有如下方式可以解决：

1. 通过postman等HTTP客户端，但需要手动将cookie同步到postman中，如果cookie较多则非常麻烦（ps:postman其实是有插件可以同步cookie的，但本质还是要做同步）
2. 写一个js脚本，脚本中可用fetch方法发起网络请求，浏览器运行该脚本。由于是在浏览器中发起请求的，因此不需要同步cookie，但会受到浏览器同源政策的限制，该方法需要依赖服务端作跨域配置

综上所述，目前还没有一个十全十美的方法，于是我又调研了一下chrome插件（chrome扩展）是否有发起跨域请求的能力。

带着半信半疑的心态，首先我找到官方文档仔细阅读后，然后按照官方文档上的教程写了一个demo，运行后发现果然可以绕过浏览器同源政策发起跨域请求并自动携带cookie，基于这一核心能力自己也实现了一个模仿postman的HTTP Client chrome插件，既可以满足工作需要，又能提升自己的技术。

2、准备好服务端接口

服务端使用Spring Boot框架搭建，并编写了分别接收三种类型请求体的接口，分别是form-data、x-www-form-urlencoded和raw（Content-Type:application/json），另外还提供了一个可以新增cookie或修改cookie value的接口，有cookie才能测试chrome扩展发出的网络请求是否能自动携带cookie。

服务端接口如下所示：

ChromeController.java

packagecom.bobo.springbootbaseservice.chrome;importcom.bobo.springbootbaseservice.common.Json;importcom.google.common.collect.ImmutableMap;importorg.apache.commons.io.IOUtils;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.util.StringUtils;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importjavax.servlet.http.Cookie;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;importjava.nio.charset.StandardCharsets;importjava.util.List;importjava.util.Map;@RequestMapping("/chrome")@RestControllerpublicclassChromeController{
   privatestaticfinalLogger log =LoggerFactory.getLogger(ChromeController.class);@GetMapping("/setCookie")publicvoidsetCookie(HttpServletRequest request,HttpServletResponse response,@RequestParam(value ="city",required =false)String city,@RequestParam(value ="company",required =false)String company){
   if(!StringUtils.isEmpty(city)){
   
            response.addCookie(newCookie("city", city));}if(!StringUtils.isEmpty(company)){
   
            response.addCookie(newCookie("company", company));}}@PostMapping("/jsonReq")publicMap<String,String>jsonReq(HttpServletRequest request,@RequestParam(value ="username",required =false)String username,@RequestParam(value ="date",required =false)String date,@RequestBody(required =false)ChromeDto chromeDto){
   returnImmutableMap.of("cookies",componentCookie(request),"queryParams",String.format("username=%s&date=%s",username,date),"requestBody",Json.serialization(chromeDto));}@PostMapping("/formUrlencodedReq")publicMap<String,String>formUrlencodedReq(HttpServletRequest request,@RequestParam(value ="username",required =false)String username,@RequestParam(value ="date",required =false)String date,@RequestParam(value ="source",required =false)String source,@RequestParam(value ="msg",required =false)String msg){
   returnImmutableMap.of("cookies",componentCookie(request),"queryParams",String