RPC(5):AJAX跨域请求处理

接上一篇RPC(4):HttpClient实现RPC之POST请求进行修改。

1 修改客户端项目

1.1 修改maven文件

修改后配置文件如下:

复制代码
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>2.3.2.RELEASE</version>
                <scope>import</scope>
                <type>pom</type>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.12</version>
        </dependency>
        <dependency>
            <groupId>org.example</groupId>
            <artifactId>httpclient_rpc_pojo</artifactId>
            <version>1.0-SNAPSHOT</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.11.1</version>
        </dependency>
    </dependencies>

1.2 新增页面

在resource下的static中新增index.html页面(提前引入jquery)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        var url = "123";
        // javascript中默认的,ajax请求不能跨域。
        // 跨域 - ajax所属的站点,和被请求的站点,不是同一个域。
        // 域 - ip,端口,域名,主机名,任何一个有变化,都是不同域。
        // 需要服务器,返回的响应中增加跨域请求头。
        function sendBodyParams(){
            $.ajax({
                "url": "http://localhost:80/bodyParams",
                "type":"post",
                "data":"[{\"name\":\"abc\", \"password\":\"123\"},{\"name\":\"def\", \"password\":\"321\"}]",
                "contentType":"application/json", // 必须设定,代表请求体的格式。默认是text/plain; 默认是 参数名=参数值&参数名=参数值 的字符串
                "dataType":"json",
                "success":function(data){
                    alert(data);
                    console.log(data);
                }
            });
        }
    </script>
</head>
<body style="text-align: center">
    <button onclick="sendBodyParams()">测试AJAX请求,请求体传递JSON参数</button>
</body>
</html>

1.3 编写启动类

复制代码
package com.example.httpclient;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class TestApp {
    public static void main(String[] args) {
        SpringApplication.run(TestApp.class, args);
    }
}

2 修改服务端项目

在bodyParams中新增@CrossOrigin方法。

3 启动服务

访问页面,点击按钮,结果如下:

相关推荐
树码小子29 分钟前
Java网络编程:(socket API编程:TCP协议的 socket API -- 回显程序的服务器端程序的编写)
java·网络·tcp/ip
绿箭柠檬茶2 小时前
Ubuntu 服务器配置转发网络访问
服务器·网络·ubuntu
FPGA_Linuxer2 小时前
FPGA 40 DAC线缆和光模块带光纤实现40G UDP差异
网络协议·fpga开发·udp
real 12 小时前
传输层协议UDP
网络·网络协议·udp
路由侠内网穿透4 小时前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
喵手7 小时前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
徐子元竟然被占了!!8 小时前
实验-基本ACL
网络
ftpeak9 小时前
从零开始使用 axum-server 构建 HTTP/HTTPS 服务
网络·http·https·rust·web·web app
LabVIEW开发10 小时前
LabVIEW气体污染无线监测
网络·labview·labview知识·labview功能·labview程序
error:(10 小时前
【从零到公网】本地电脑部署服务并实现公网访问(IPv4/IPv6/DDNS 全攻略)
网络·智能路由器