SpringBoot/JQuery/Ajax跨域问题(附加前后端交互GET/POST请求小demo)

发表于 更新于 分类于 ，

Jquery-ajax-springboot 跨域问题再现。

SpringBoot/JQuery/Ajax跨域问题(附加前后端交互GET/POST请求小Demo)

环境： Jquery + Spring Boot

【1】Access to XMLHttpRequest…by CORS policy

Access to XMLHttpRequest at ‘http://localhost:8082/felix/login‘ from origin ‘http://127.0.0.1:5500‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决办法：

在后端 Spring Boot 中加入注解：@CrossOrigin，详见页面底部完整示例。

【2】net::ERR_FAILED 415、400，外加报错 1

  1. ajax 中缺少 【contentType】。如果后端出现：

    Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported] 此类错误。

    正确的是："contentType": "application/json;charset=utf-8"，详见页面底部完整示例。

  2. 所要传输的数据和 contentType 不匹配。

  3. 这就依靠仔细检查了…

【3】关于 json 和 jsonp …

jsonp 不支持 POST 跨域，所以会自动转成 GET.

所以还是用 json 吧…

【4】前端总是执行 error ，而不执行 success

dataType 这个属性啊，就是标志着返回值的格式，如果不是严格的对应格式，就执行不到 success。

完整示例

说明：

示例中包含两个接口：登录接口、新闻接口

提示：jquery-3.6.0.min.js 需要自行下载。代码后面有部分说明。

前端：

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#submit").click(function () {
                var url = "http://localhost:8082/felix/login";
                var params = "{\"username\":\""+$("input[type='text']").val()
                +"\",\"password\":\"" + $("input[type='password']").val() + "\"}";
                console.log("传输的数据是：" + params);
                $.ajax({
                    "url": url,
                    "dataType": "json",
                    "data": params,
                    "type": 'post',
                    "contentType": "application/json;charset=utf-8",
                    "success": function (data) {
                        console.log(data.explain);
                    },
                    "error": function (a) {
                        console.log("错误");
                    }
                });
            });
        });
    </script>
</head>

<body>
    <form action="#">
        username:<input type="text" name="username"><br>
        password:<input type="password" name="password"><br>
        <input type="button" value="submit" id="submit">
    </form>
</body>
</html>

后端：

请新建Spring Boot项目，注意，在入口函数的同级包下创建其他包、Java文件，例如，SpringBootHelloApplication 的包名为 com.felix.demo，那么其他的包就要在此包名下面创建。

创建一个DemoController，和一个实体类，叫做 User。

注意包名的修改！

DemoController

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
package com.felixcjy.springboothelloword.controller;

import org.springframework.web.bind.annotation.*;
import com.felixcjy.springboothelloword.pojo.User;

/**
 * @author FelixCJY / FelixCai
 * @date 2022/05/17 13:40
 **/

@RestController
@CrossOrigin
@RequestMapping("/felix")
public class DemoController {

    @PostMapping(value = "/login",consumes = "application/json;charset=UTF-8")
    public String login(@RequestBody User user){
        // 校验一下密码算了，123 是对的，username 可自行添加
        if ("123".equals(user.getPassword())) {
            return "{\"code\": 100, \"explain\":\"密码正确。\"}";
        } else {
            return "{\"code\": 101, \"explain\":\"密码错误。\"}";
        }
    }

    @PostMapping(value = "/send",consumes = "application/json")
    public String send(@RequestBody String user){
        return "oo："+user;
    }

    @RequestMapping("/news")
    public String getNews(){
        return "{\"title\":\"大新闻啊\",\"content\":\"big 胆！ 敢看大新闻？！ \"}";
    }
}

User

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
package com.felixcjy.springboothelloword.pojo;

/**
 * @author FelixCJY / FelixCai
 * @date 2022/05/17 13:45
 **/
public class User {

    String username;
    String password;

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

接口示例：

注意修改端口和主机地址

新闻接口（GET）：

接口URL http://localhost:8080/felix/news
请求方式 GET
Content-Type application/json

请求结果：

1
2
3
4
{
    "title": "大新闻啊",
    "content": "big 胆！ 敢看大新闻？！ "
}

登录接口（POST）：

接口URL： http://localhost:8080/felix/login
请求方式： POST
Content-Type application/json

请求体：

1
2
3
4
{
    "username": "hh",
    "password": "123"
}

返回结果：

1
2
3
4
{
	"code": 100,
	"explain": "密码正确。"
}

参考