jquery ajax 调用 spring boot 接口 发送json数据示例,兼容跨域调用,解决maven项目中引用本地lib目录的jar包时打包失败的问题

本文主要解决三个问题:

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中这样修改就可以解决了:

    <build>

        <resources>
            <resource>
                <directory>libdirectory>
                <targetPath>/BOOT-INF/lib/targetPath>
                <includes>
                    <include>**/*.jarinclude>
                includes>
            resource>
        resources>

        <plugins>
            <plugin>
                <groupId>org.springframework.bootgroupId>
                <artifactId>spring-boot-maven-pluginartifactId>
            plugin>
            <plugin>
                <groupId>org.apache.maven.pluginsgroupId>
                <artifactId>maven-compiler-pluginartifactId>
                <configuration>
                    <skip>trueskip>
                configuration>
            plugin>
            <plugin>
                <groupId>org.apache.maven.pluginsgroupId>
                <artifactId>maven-surefire-pluginartifactId>
                <configuration>
                    <skip>trueskip>
                configuration>
            plugin>
        plugins>
    build>

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

由于服务端日志中一直观察不到ajax调用的正确请求,于是祭出终极大杀器——抓包,打开WireShark,选择对应的网卡,参数设置成:

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

抓包后发现,第一个HTTP请求竟然不是POST,而是OPTIONS:

jquery ajax 调用 spring boot 接口 发送json数据示例,兼容跨域调用,解决maven项目中引用本地lib目录的jar包时打包失败的问题

这不是我嘞个大擦了么…… 立马拿出万能钥匙——谷歌搜索引擎开始解决问题,输入关键字”http options request”,看到第一条就应该是我要的答案了:

jquery ajax 调用 spring boot 接口 发送json数据示例,兼容跨域调用,解决maven项目中引用本地lib目录的jar包时打包失败的问题

沿着指路明灯给出的航向继续前进(这里是链接):

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 CORS, a preflight request 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 request permission for these parameters:

  • The Access-Control-Request-Method header sent in the preflight request tells the server that when the actual request is sent, it will have a POST request method.

  • The Access-Control-Request-Headers 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("/**", buildConfig()); // 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': "",u:"",d:"" }),
                        contentType: "application/json",
                        success: msg => {
                            console.log(msg);
                        }},
                        error: (_XMLHttpRequest, _textStatus, _errorThrown) => {
                            // on error
                            $("#rst").html(_XMLHttpRequest.readyState + " --> " + _textStatus + " --> " + _errorThrown);
                        },
                        dataType:"json"});

最后的成品如下:

jquery ajax 调用 spring boot 接口 发送json数据示例,兼容跨域调用,解决maven项目中引用本地lib目录的jar包时打包失败的问题

反思:

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

Original: https://www.cnblogs.com/sixiweb/p/15122157.html
Author: 四喜
Title: jquery ajax 调用 spring boot 接口 发送json数据示例,兼容跨域调用,解决maven项目中引用本地lib目录的jar包时打包失败的问题

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/540078/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 《深入理解Java虚拟机》并发(第12~13章)笔记

    volatile关键字的作用 所有变量的可见性——仅仅是修改后的值的可见性,不保证并发修改时新值和预期一致。即只保证读,不保证写。 禁止指令重排序——修饰的变量,读写不会指令重排。…

    Java 2023年5月29日
    066
  • 百套响应式前端网站模板源码下载建站视频教程

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    Java 2023年6月8日
    0104
  • Spring源码学习笔记4——BeanFactoryPostProcessor执行

    一丶BeanFactoryPostProcessor是什么 Spring留给我们的一个扩展接口,在BeanDefinition加载注册完之后,并执行一些前置操作(笔记3)之后会反射…

    Java 2023年6月14日
    087
  • Java 内存模型

    《Java虚拟机规范》中曾试图定义一种”Java内存模型”(Java Memory Model,JMM)来 屏蔽各种硬件和操作系统的内存访问差异,以实现让J…

    Java 2023年5月29日
    080
  • Spring 调用ORACLE存储过程的结果集

    http://blog.csdn.net/sunsnow8/archive/2005/01/10/246588.aspx oracle 对于高级特性总是与众不同(我极力讨厌这一点,…

    Java 2023年5月30日
    072
  • 基于Spring aop写的一个简单的耗时监控

    前言:毕业后应该有一两年没有好好的更新博客了,回头看看自己这一年,似乎少了太多的沉淀了。让自己做一个爱分享的人,好的知识点拿出来和大家一起分享,一起学习。 背景: 在做项目的时候,…

    Java 2023年5月30日
    063
  • 使用metaWebBlog接口实现博客文章同步

    想实现自己的文章一处编写,多处发布到各大平台(比如博客园,CSDN)等要怎么实现呢。需要由这些组成: 一般来说,写文章的软件很容易获得,如果目标平台再有开放接口,我们可以将文章通过…

    Java 2023年5月30日
    053
  • Html转换PDF(Java实用版)

    前言: 在工作当中,遇到了需要把HTML页面转化为PDF文档,有很多中实现,如下进行一个对比,大家个借鉴去进行使用 各实现对比表 于Windows平台进行测试: 此博客仅基于ITe…

    Java 2023年6月8日
    0133
  • 黑喵桌面音乐播放器汉化版

    安装方法:解压CharaColle,运行Regpatch。exe 注册游戏(XP 系统需要装.net framework 2.0)即可启动游戏。启动比较慢,请大家耐心下 使用说明:…

    Java 2023年5月29日
    064
  • Qt 可重入和线程安全的理解

    概述:线程安全: 一个线程安全的函数可以同时被多个线程调用,即便是它们使用来了共享数据。因为该共享数据的所有实例都被序列化了。(实例序列化是指这个实例已经被设置为顺序(串行)的访问…

    Java 2023年5月30日
    076
  • nginx重新整理——————nginx 模块[十]

    前言 简单介绍一下nginx的模块。 正文 https://nginx.org/en/docs/ 这里面可以看到官方模块。 比如打开这个模块: https://nginx.org/…

    Java 2023年5月30日
    074
  • Spring(一):简介

    一、什么是Spring 广义上的 Spring 泛指以 Spring Framework 为核心的 Spring 技术栈。 经过十多年的发展,Spring 已经不再是一个单纯的应用…

    Java 2023年6月15日
    063
  • CompletableFuture的简单使用

    日常开发中,我们都会用到线程池,一般会用execute()和submit()方法提交任务。但是当你用过CompletableFuture之后,就会发现以前的线程池处理任务有多难用,…

    Java 2023年6月6日
    063
  • Android 11 使用 BroadcastReceiver 监听短消息

    使用装有MIUI系统的小米手机,静态注册的广播接收器监听短消息。 在 AndroidManifest.xml中声明权限 <uses-permission android:na…

    Java 2023年6月7日
    073
  • 一条 SQL 语句是如何执行的

    一条 SQL 语句是如何执行的 SQL查询语句 select * from user where ID=10; MySQL 的基本架构可以分为 Server 层和存储引擎两部分。S…

    Java 2023年6月8日
    078
  • 运用Spring Aop,一个注解实现日志记录

    运用Spring Aop,一个注解实现日志记录 1. 介绍 我们都知道Spring框架的两大特性分别是 IOC (控制反转)和 AOP (面向切面),这个是每一个Spring学习视…

    Java 2023年6月8日
    087
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球