GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。它对标的是REST这种接口风格，它重新定义了一种接口模式，让调用方可以指定需要查询的数据，而且没有任何冗余。

GraphQL相比现在流行的RESTful接口的优势在哪呢？考虑一种场景：一个购物系统，提供在主页展示商品简略信息的接口，这个接口只用查询出商品的名称、价格和介绍图地址，然后当我进入到商品的详情页面时需要用另一个接口查出商品的更多具体信息。同样是查询商品信息这个操作在不同的场景可能就要定义/product/brief和/product/detail/等多个接口。

而对于GraphQL，查询简略信息的场景，我们可以用这样一个查询语句：

1
2
3
4
5
6
7

{
  product {
    name
    price
    picture
  }
}

而在详情页面我们的查询语句是这样：

1
2
3
4
5
6
7
8
9
10
11

{
  product {
    name
    price
    originalPrice
    picture
    morePicture
    publishTime
    ...
  }
}

这样我们的客户端查询更加灵活，服务端不用编写更多的接口应对更多的场景，可复用性更好。这就是GraphQL最大也最直观的优势了。

在Spring Boot项目中编写GraphQL接口

首先为项目添加graphql-java的依赖：

1
2
3
4
5
6
7
8
9
10
11

<!-- GraphQL -->
<dependency>
    <groupId>com.graphql-java</groupId>
    <artifactId>graphql-java</artifactId>
    <version>11.0</version>
</dependency>
<dependency>
    <groupId>com.graphql-java</groupId>
    <artifactId>graphql-java-spring-boot-starter-webmvc</artifactId>
    <version>1.0</version>
</dependency>

然后后在resource目录下添加一个定义Schema的文件，如schema.graphqls。Schema定义了一个Query用于查询，blogById属性返回Blog类型数据，然后定义了几个实体类型。完整的定义如下：

然后最重要的部分是实现数据获取的部分。

首先定义一个GraphQLProvider类，它的作用是结合TypeDefinitionRegistry和RuntimeWiring并生成最终的GraphQL，把GraphQL这个Bean注入到Spring容器中就能对外提供一个/graphql的HTTP接口。下面分别说说TypeDefinitionRegistry和RuntimeWiring是什么。

TypeDefinitionRegistry比较简单就是从之前schema.graphqls读取到的Schema定义；RuntimeWiring要知道如何去获取Schema中定义的类型的数据，这里就需要我们自己实现DataFetcher了。借用一下官方的图展示一下它们的关系：

下面是GraphQLProvider的代码，和官方的图基本一致比较清晰：

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

@Component
public class GraphQLProvider {
    @Autowired
    GraphQLDataFetchers graphQLDataFetchers;

    private GraphQL graphQL;

    @Bean
    public GraphQL graphQL() {
        return graphQL;
    }

    @PostConstruct
    public void init() throws IOException {
        GraphQLSchema graphQLSchema = buildSchema();
        this.graphQL = GraphQL.newGraphQL(graphQLSchema).build();
    }

    private GraphQLSchema buildSchema() throws IOException {
        TypeDefinitionRegistry typeRegistry = buildRegistry();
        RuntimeWiring runtimeWiring = buildWiring();
        SchemaGenerator schemaGenerator = new SchemaGenerator();
        // 结合 TypeDefinitionRegistry 和 RuntimeWiring 生成 GraphQLSchema
        return schemaGenerator.makeExecutableSchema(typeRegistry, runtimeWiring);
    }

    private TypeDefinitionRegistry buildRegistry() throws IOException {
        URL url = Resources.getResource("schema.graphqls");
        String sdl = Resources.toString(url, Charsets.UTF_8);
        return new SchemaParser().parse(sdl);
    }

    private RuntimeWiring buildWiring() {
        return RuntimeWiring.newRuntimeWiring()
                .type(newTypeWiring("Query")
                        .dataFetcher("blogById", graphQLDataFetchers.getBlogByIdDataFetcher()))
                .type(newTypeWiring("Blog")
                        .dataFetcher("author", graphQLDataFetchers.getAuthorDataFetcher()))
                .build();
    }
}

然后看看具体的DataFetchers怎么实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@Component
public class GraphQLDataFetchers {
    @Autowired
    BlogService blogService;
    @Autowired
    UserService userService;

    public DataFetcher<Blog> getBlogByIdDataFetcher() {
        return dataFetchingEnvironment -> {
            Integer blogId = dataFetchingEnvironment.getArgument("id");
            return blogService.findById(blogId);
        };
    }

    public DataFetcher<User> getAuthorDataFetcher() {
        return dataFetchingEnvironment -> {
            Blog blog = dataFetchingEnvironment.getSource();
            Integer aid = blog.getAid();
            return userService.findById(aid);
        };
    }
}

DataFetcher设计采用了函数式编程的思想，它是一个函数式接口，提供了dataFetchingEnvironment获取查询参数，返回查询结果，中间如何去查到数据由函数内部实现GraphQL框架并不关注。这里我直接使用之前写好的业务层接口BlogService根据id查询Blog，然后根据Blog的aid用UserService查询author。写到这里其实大致就能看出来GraphQL它的功能主要体现control层，要在原来的RESTful接口上做迁移也只用修改control层的代码。

写完了之后运行项目看看效果，我这里使用了Altair GraphQL Client这个浏览器插件调用GraphQL接口：

这里要注意的是GraphQL接口是基于HTTP协议的，但是查询语句并不是JSON格式，但是返回结果是标准的JSON格式，从浏览器控制台可以看到具体的请求格式：

对GraphQL的一些看法

前面提到了GraphQL相对传统的RESTful接口的优势非常明显，客户端使用接口更加灵活，服务端接口复用程度高。

如果想把现有的项目迁移到GraphQL上的话需要只需要修改服务端的control层，但是因为GraphQL的查询语句不是传统的JSON格式，所以客户端也需要做相应的更改。

而GraphQL另一个重要的问题在哪呢，看上面对项目GraphQL的接口调用可以发现接口都是以/graphql这个路径发布的，原来系统传统的根据路径做鉴权的方法基本都失效了，比如在这个DEMO中我为了调通这个接口，把/graphql这个路径加到鉴权的白名单中：

另外对于一个实体不同的用户能访问到的字段也不一样，比如用户隐藏了手机号，那么其他用户是不能在GraphQL中查询到他的手机号的，这样就必须实现字段级的鉴权了。

按照GraphQL官方推荐做法，我们应该把接口鉴权放到业务层，但是原来基于路径的鉴权业务层未鉴权的接口就需要做修改了。

总的来说GraphQL增强了客户端的能力，但是另一方面也算是带来了更多安全隐患，旧系统想要享受GraphQL带来的便利就得在系统的安全策略上做出合理的调整。

Github Action是Github提供的免费CI系统，利用Git Hooks可以在提交代码时触发自动化构建流程。对于我使用hexo搭建的博客来说，在我写完博客后push到Github就能触发自动hexo deploy发布博客。

在项目的.github/workflows/创建一个yaml配置文件，也可以在Github Action页面创建该文件：

然后在配置文件中定义自动化的steps：hexo博客需要安装Node.js环境，然后npm install下载依赖，执行hexo deploy即可。我这里使用了actions-gh-pages这个插件，可以定义部署的Git仓库和分支等信息。

我之前的博客是在marwincn/blog代码仓的gh-page分支部署的Github Pages，但是Github有个限制就是非username.github.io仓库部署的Github Pages发布的地址会带上仓库名的相对路径，如https://marwincn.github.io/blog/。为了去掉/blog/这个相对路径，我还是决定将博客发布到marwincn/marwincn.github.io代码仓。

actions-gh-pages插件部署的背后就是将渲染后的静态页面push到代码仓，要成功push就要获取代码仓的push权限，对于自动化脚本来说最简单且安全的方法是使用token。首先在Github设置页面生成一个token：

然后将此token设置到配置了Github Action的代码仓的环境变量中，在ymal配置中可以通过${{ secrets.PERSONAL_TOKEN }}访问该环境变量：

最后给出我的yaml配置：

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

name: Node.js CI
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
        cache: 'npm'
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run build
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        personal_token: ${{ secrets.PERSONAL_TOKEN }}
        external_repository: marwincn/marwincn.github.io
        publish_branch: main
        publish_dir: ./public
        cname: marwin.cn
        commit_message: ${{ github.event.head_commit.message }}

最后实现的效果，写完博客直接git push，然后Github Action自动部署静态页面到marwincn/marwincn.github.io代码仓，然后更新了博客页面：

CNAME到自定义域名

如果你正好有个域名，那么可以将该域名CNAME到Github Page实现通过自定义域名访问博客。

首先在拥有域名的服务商对域名进行CNAME解析：

想要实现CNAME单方面的解析还不够，需要在被解析的域名下放置一个CNAME文件，可以在hexo渲染时就带上CNAME文件，我这里使用了actions-gh-pages插件，添加cname: marwin.cn就可以同时发布一个CNAME文件：

最终就可以使用自己的域名访问你的博客了。

Google Analytics博客访客分析

Google Analytics提供免费的网站访客分析，可以在官网https://analytics.google.com/创建媒体资源和应用，根据提示创建跟踪网站的代码：

将这段JavaScript标签放到hexo生成静态页面的模板中，hexo渲染生成的每个页面就会带上这段标签，当用户访问你的博客时就会给Google发送请求记录这次访问：

使用Google分析的缺点就是国内用户可能无法访问Google而无法统计到，当然也可以用百度统计来统计访客，但是百度统计的体验并不好，而且Github Pages屏蔽了百度的爬虫，对于程序员群体来说使用Google应该是比较基本的操作，所以使用Google分析挺好的，最终效果如下：

RSS是一种信息聚合的技术，都是为了提供一种更为方便、高效的互联网信息的发布和共享，用更少的时间分享更多的信息。

简单来说RSS就是以统一的格式发布内容，订阅了某个RSS源的客户端可以接受到该源的更新推送。类似订阅一份报纸后，当天最新的报纸就会准时递到你手中。而由于RSS统一格式的优势，不拘于新闻，各种博客，网站更新，各种app讯息都能订阅，这种统一的概念正是吸引我的地方之一。另外一个吸引我的地方是RSS只会让你接收你想要接收的内容，沉浸式无广告阅读，不会有“猜你喜欢”擅自用AI技术推送消息给你的情况出现。

其实我接触RSS也才一年，这段时间我就已经抛弃了大部分的资讯类的APP。事实上使我相见恨晚的RSS并不是什么新东西，早在十几年前RSS就出现了，在各种资讯APP群魔乱舞的时代RSS始终存在于一个小圈子里。

二、如何使用RSS

想要用RSS来阅读内容首先要有RSS阅读软件，这些软件搜一下就能找到很多，我目前使用的是Reeder（macOS，iPadOS），RSS Reader Prime（IOS，独立开发者制作的良心应用，完全免费）。

拥有一个RSS阅读器后，需要找到你想要的订阅的RSS源，一般是一个链接，如少数派的RSS源地址是 https://sspai.com/feed 。在阅读器中添加该订阅源后就能获取到最新文章的推送，一般的RSS阅读器都有已读未读，分类，更换主题等功能，阅读体验比资讯APP更好。另外推荐一个RSS源的索引： https://docs.rsshub.app/ ，里面有各种订阅源可以满足你的需要。

三、我制作的RSS工具

出于对RSS的喜爱，我想给我自己的博客（ http://www.marwin.cn ）添加RSS功能。事实上很多使用框架搭好的博客，如WordPress都自带了RSS功能，无奈我的博客是自己写的后台加静态的前端页面。于是我写了一个定时抓取博客更新并制作成RSS源的软件，在自己设定的时间周期里，绑定的各种类型的Trigger能爬取想要的内容的更新，然后生成RSS源。目前只将我自己的博客生成了RSS源： http://api.marwin.cn/rss/blog 。以后可以爬取其他各种感兴趣的内容然后订阅。

更新：由于现在使用hexo搭建博客，配合hexo-rss插件能够直接发布RSS，本博客RSS地址为：https://marwincn.github.io/blog/rss2.xml

之前为了远程调试redis，将服务器上的redis绑定到了阿里云的公网IP上。后来上redis时发现多了两个key，查看了这两个key发现里面是curl和wget命令，于是猜到有人远程下载了脚本，但是下载的地址已经失效了，无法判断是什么脚本，但是可以肯定服务器被攻击了。后来检查服务器的资源占用，果然cpu占用间断性的会飙到100%，显然被人用来挖矿了。

二、关于漏洞的猜测

redis绑定到公网IP上很容易中招，网上全是类似的帖子（主要还是安全上没有配置好，然后使用了root用户运行了redis-server，感觉自己的辣鸡服务器不会被人盯上所以大意了）。检查了一下redis的配置，dbfilename被设置成～/.ssh/authorized_keys。原来是将攻击者将他的ssh公钥存到redis的key，然后当redis备份key时就将他的公钥存到了authorized_keys成功免密登录了。

关于之前看到的两个脚本有一种说法是，将dbfilename设置到/etc/crontabs目录下。crontabs是定时执行任务的工具，会强制执行这个目录的文件，于是脚本得以运行。

三、解决问题

第一步关闭redis-server，执行shutdown命令的时候发现无法关闭，可能被动了手脚，于是只能kill掉进程。修改redis配置文件，更换密码删掉dbfilename的配置然后重新运行。

第二步修改ssh的authorized_keys。中间我发现sudo居然都没有权限修改，sudo chmod也不能执行，这里我相当纳闷，root用户也没有权限？后来发现文件是被chattr锁定了，解除锁定前root权限都无法修改。执行chattr -i解除锁定却发现chattr程序直接被攻击者被删除了。好在服务器能联网，重新下载chattr然后修改了authorized_keys权限删除了攻击者的公钥。到现在也才防止了对方继续连接到我的服务器。

第三步要停止挖矿程序。虽然监测到cpu占用率经常到100%，但是top命令却没有找到任何占用高的进程，使用ps 也是如此。所以说挖矿程序是被隐藏了起来，找不到这个进程要怎么杀掉它？中间我找了各种办法，找操作历史，找时间段修改的文件，到/proc目录下面找也没有什么异常。有没有可能是top和ps程序被替换了？使用stat /usr/bin/top发现程序并没有被修改。就算top，ps程序没有被修改，它们依赖的库可能被修改了，但是排查起来非常麻烦，终于我找到了一个软件unhide（CentOS下），Ubuntu下面也有类似的sysdig可以检测出隐藏的进程。利用unhide很容易就找到了一些隐藏的进程：

在这些进程里一眼就能看出pamdicks不是什么正经程序（攻击者前面为了不让我关掉程序可谓使了很多小心机，结果这里挖矿程序的名字却如此裸露，让我一眼发现）。于是google了一下，果然是挖矿程序，据说杀掉这个进程还会继续重启，删掉进程目录也会重新生成，所以我找到进程目录清空然后用chattr给锁定了（这波啊是以其人之道还治其人之身），再杀掉进程，终于cpu占用降下来了。

本来在自己的vps上自己写了一个博客，但是很多地方需要自己不断维护，自己写的前端也不太满意所以决定用框架搭一个静态博客部署在github page上，这样也省了在vps上到处迁移。

我选择了人气比较高的Hexo，记录一下自己搭建的过程，作为官方文档的整理和补充。

二、安装

首先确认电脑里有git和npm （安装node.js即可）的支持，以下为macOS上使用homebrew安装，其他安装方式参考搜索引擎。

1
2
3
4

# 安装git
$ brew install git
# 安装node.js
$ brew install node

安装Hexo

1

$ npm install -g hexo-cli

安装后可以使用hexo命令行，官方的命令文档：文档。

新建项目

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8

.
├── _config.yml     //项目配置文件
├── package.json    //应用程序的信息
├── scaffolds       //模版文件夹
├── source          //存放用户资源和md文件的地方
|   ├── _drafts
|   └── _posts
└── themes          //主题文件夹

修改_config.yml为自己的信息，参考配置文档：文档。

安装主题

建立项目后，第一件事可能是找一个喜欢的主题，在主题市场找到自己满意的主题进行接下来的安装，当然也可以自己写一个主题。

找到选好的主题的github项目，将其clone到你新建的项目的themes目录下，这里的默认的一个主题是landscape。修改项目根目录下的_config.yml（项目配置文件，一般主题目录下也有一个_config.yml，请勿混淆），theme的值改为刚才clone的主题名称。到这里就可以将主题应用到项目上，其他配置参考每个主题的文档。

三、部署

根据github的规定，仓库名为<your github name>.github.io时默认该仓库的master分支为github page部署分支，此时首页的url为https://<your github name>.github.io/。而其他命名的仓库可以指定一个分支，如gh-pages作为部署分支，此时页面的url为https://<your github name>.github.io/repositorie-name/。

由于这种差异，可以有两种部署方式。一是将hexo项目在本地渲染静态页面，然后push到远程；二是将项目代码同步到github仓库，使用CI将远程渲染后的结果发布到gh-pages分支。

GitHub已经可以免费使用GitHub Action做CI了，写完博客直接push就可以部署，参加我的另一篇博客Github Pages 博客优化

本地渲染

由于是部署到github page，所以使用git发布到远程。按照文档，可以使用SFTP等方式发布到自己的服务器上，也可以设置多个发布地址，按顺序发布。

安装hexo-deployer-git：

1

$ npm install hexo-deployer-git --save

修改_config.yml的参数：

1
2
3
4
5

deploy:
  type: git
  repo: <repository url> #git@github.com:xxxx/xxxx.github.io.git
  branch: [branch]
  message: [message]

需要提前将本地ssh pubkey添加到github的SSH keys里，作为push命令的身份认证。然后只需一条命令就能将网站部署到服务器上：

1

$ hexo clean && hexo deploy

远程渲染

参考官方文档：github-pages

最近在写的一个项目后端使用了Spring Boot和Spring Security，前端使用Vue和axios（发送ajax）。为了实现前后端分离，前端和后端能部署在不同的域名下，后端要开启CORS（跨站资源共享），保证后端接口能被不同域名下的前端正常请求。

由于浏览器的同源策略，跨域请求一般会被拒绝，导致ajax无法访问到后端资源。
跨域的几种场景，可以判断自己的网站是否跨域：

1. 域名不同
2. 域名相同，端口不同
3. 域名相同，协议不同，如http和https

了解了为什么要开启CORS后可以开始编写开启CORS的代码了。

二、Spring Boot配置里开启CORS

Spring Boot开启CORS只需在配置里添加CORS的支持，直接编写配置类即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 允许的域名
        corsConfiguration.addAllowedHeader("*"); // 允许的请求头
        corsConfiguration.addAllowedMethod("*"); // 允许的方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

三、Spring Security配置

由于使用Spring Security后请求都会被它拦截，需要对security也进行配置：

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

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    ...

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                // 如果有允许匿名的url，填在下面
                .anyRequest()
                .permitAll()
                .and()
                .formLogin()
                .loginProcessingUrl("/user/login")
                // 自定义处理器，对ajax请求响应json数据
                .successHandler(new AuthenticationSuccessHandler() {
                    @Override
                    public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
                        httpServletResponse.setContentType("application/json;charset=utf-8");
                        PrintWriter out = httpServletResponse.getWriter();
                        // 将结果转换成Json数据，Result是自己编写的结果类
                        JSONObject result = JSONObject.fromObject(new Result(Result.SUCCESS, "登录成功！"));
                        out.write(result.toString());
                        out.flush();
                        out.close();
                    }
                })
                // 自定义处理器，对ajax请求响应json数据
                .failureHandler(new AuthenticationFailureHandler() {
                    @Override
                    public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
                        httpServletResponse.setContentType("application/json;charset=utf-8");
                        PrintWriter out = httpServletResponse.getWriter();
                        // 将结果转换成Json数据，Result是自己编写的结果类
                        JSONObject result = JSONObject.fromObject(new Result(Result.ERROR, "登录失败！"));
                        out.write(result.toString());
                        out.flush();
                        out.close();
                    }
                })
                .usernameParameter("username")
                .passwordParameter("password")
                .permitAll()
                .and()
                .logout()
                .logoutUrl("/logout")
                .permitAll();
        // 开启CORS，关闭CSRF跨域
        http.cors().and().csrf().disable();
    }

    @Override
    public void configure(WebSecurity web) {
        // 设置拦截忽略文件夹，可以对静态资源放行
        web.ignoring().antMatchers("/css/**", "/js/**", "/js/**", "/lib/**", "/upload/**");
    }
}

这里有两个坑：

设置CORS和CSRF

一是，下面这一句必须要设置，否则请求会直接403 Forbidden

1

http.cors().and().csrf().disable();

自定义登录处理器

二是，SpringSecurity通常配置有http.formLogin().successForwardUrl().failureForwardUrl()这几个配置，但是这些配置都是基于服务器渲染页面的模式，在前后端分离项目中登录只用发送携带登录信息的ajax，服务器响应结果即可，开启这些跳转配置会使ajax无法正常获取响应。

所以要自定义处理器，登录成功响应对应的Json结果，写到HttpServletResponse中:

1
2
3
4
5
6
7
8
9
10
11
12

new AuthenticationSuccessHandler() {
    @Override
    public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
        httpServletResponse.setContentType("application/json;charset=utf-8");
        PrintWriter out = httpServletResponse.getWriter();
        // 将结果转换成Json数据，Result是自己编写的结果类
        JSONObject result = JSONObject.fromObject(new Result(Result.SUCCESS, "登录成功！"));
        out.write(result.toString());
        out.flush();
        out.close();
    }
}

四、前端设置

在跨域请求的时候，通常会自动发送两个请求。第一个请求方法为OPTION，目的是探测后端是否支持跨域，如果支持跨域再发送真实请求。这里是自动发送不用自己编写代码。

然后在发送登录请求的时候，会遇到前端ajax发送了username和password参数，但是后端收不到参数而验证失败。这里的原因是，前端ajax比如axios通常以json格式发送数据，请求头中content-type为application/json，但是Spring Security的登录不支持这种格式所以找不到参数。

解决方法有两种，一是重写Spring Security的登录Filter，使其支持json类型数据，操作比较复杂网上有很多相关博客这里就不提了。二是在登录时前端设置数据格式为SpringSecurity支持的application/x-www-form-urlencoded。

五、总结

至此CORS就已经开启，前端就可以愉快地使用ajax访问后端了。