jqueryajax调用springboot接口发送json数据示例，兼容跨域调用，解决m。。。

⽤，解决m。。。

本⽂主要解决三个问题：

1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题

昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题

其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：

lib

/BOOT-INF/lib/

**/*.jar

org.springframework.boot spring-boot-maven-plugin

org.apache.maven.plugins maven-compiler-plugin

true

org.apache.maven.plugins maven-surefire-plugin

true

2.解决spring boot开发的微服务接⼝中的跨域问题

由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：

ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝

抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：

这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：

沿着指路明灯给出的航向继续前进（）：

OPTIONS

The HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with this

method, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：

In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will requestpermission for these parameters:

The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.

我恍然⼤悟，原来是跨域调⽤的问题。那好办了，继续使⽤搜索引擎解决问题，然后找到了这篇⽂章：

主要是使⽤了⽂中列出的类，为了防⽌⽂章失效，我把类贴在下⾯，感谢万能的搜索引擎，感谢楼上⽂章中的作者，感谢MOZILLA！

package cn.sophie.errorword.detect.detectapi.utils;

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;/**

* @author sixiweb * @version 1.0

* @date 2021-08-10 01:01 */

@Configuration

public class CorsConfig {

// 当前跨域请求最⼤有效时长。这⾥默认30天 private long maxAge = 30 * 24 * 60 * 60;

private CorsConfiguration buildConfig() {

CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin(\"*\"); // 1 设置访问源地址 corsConfiguration.addAllowedHeader(\"*\"); // 2 设置访问源请求头 corsConfiguration.addAllowedMethod(\"*\"); // 3 设置访问源请求⽅法 corsConfiguration.setMaxAge(maxAge);

corsConfiguration.setAllowCredentials(true); //⽤于 token 跨域 return corsConfiguration; }

@Bean

public CorsFilter corsFilter() {

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(\"/**\// 4 对接⼝配置跨域设置 return new CorsFilter(source); }}

另外，需要在application.yml中做⼀些配置：

spring: mvc:

dispatch-options-request: true

运⾏接⼝项⽬，成功之后⽤postman测试⼀遍，very OK，接下来 mvn package打包之后，马上上传到服务器上⽤postman测试⼀把，⼀把过就是这么丝滑⽐那个啥巧克⼒还要丝滑。

3.ajax 发送json数据的问题

接⼝没有问题了，接下来就是解决发送的数据的问题了，office 外接程序使⽤的⽐较新的版本——基于nodejs、react的，⽽office的api也是基于promise的，对ajax也稍作改造⼀下，⽤⼀下匿名函数。

// 将在 Word ⽂档正⽂中出现的⽂字进⾏错别字监测 $.ajax({

type:\"POST\

url: \"http://你的接⼝服务的ip地址:8082/api/detect\ data: JSON.stringify({ 'c': range.text, 's': \"\ contentType: \"application/json\

success: msg => { console.log(msg); }},

error: (_XMLHttpRequest, _textStatus, _errorThrown) => { // on error

$(\"#rst\").html(_XMLHttpRequest.readyState + \" --> \" + _textStatus + \" --> \" + _errorThrown); },

dataType:\"json\

最后的成品如下： 反思：

为什么在我调试外接程序的时候没有发现这个web页⾯是在本地的IIS Express中的呢，不然的话，我应该⽴马就能想到存在跨域问题。