ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前后端跨域问题解决

2021-04-25 11:29:24  阅读:144  来源: 互联网

标签:跨域 url 前后 JSON JSONP 解决 data 请求


跨域问题解决方案

1. 什么是跨域?

  • 当一个请求的url与当前页面url的协议、域名(IP)、端口三者有任一不同即为跨域

1.2 跨域问题示例:

  • 后端代码(请求地址:http://localhost:8080/login.action):
@WebServlet(name = "loginServlet",urlPatterns = "/login.action")
public class DomainServlet extends HttpServlet {

    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        // 1.读取请求体中的JSON数据
        InputStream input = req.getInputStream();
        StringBuffer sb = new StringBuffer();

        InputStreamReader inputStreamReader = new InputStreamReader(input,"utf-8");
        char[] data = new char[1024];
        while (inputStreamReader.read(data) != -1){
            sb.append(data,0,data.length);
        }

        // 2.返回响应结果
        Person person = JSON.parseObject(sb.toString(), Person.class);

        PrintWriter writer = res.getWriter();
        writer.print(JSON.toJSONString(person));
        writer.flush();
        writer.close();
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }
}
  • 前端代码(请求地址:http://localhost:5500/login01.html):
<!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 src="res/jQuery.js"></script>
</head>
<body>
    <div style="margin: auto auto;width: 50%;">
        <input type="text" placeholder="username" name="username" id="username"/><br/>
        <input type="password" placeholder="password" name="password" id="password"/><br/>
        <button id="login">login</button><br/>
        <label id="text"></label>
    </div>
</body>
</html>
<script>
    $(()=>{
        let url;
        $.getJSON("res/webconfig.json",function(data){
            url = data.protocol + "://" + data.host + ":" + data.port + "/" + data.path + "/";
        })
    
        $("#login").click(function(){
            var user = {
                username : $("#username").val(),
                password : $("#password").val()
            }
            
            let userJson = JSON.stringify(user);
            $.ajax({
                url: url + "login.action",
                type: "post",
                contentType: "application/json",
                data: userJson,
                success: function(response){
                   $("#text").text(response) 
                },
                error: function(){
                    alert("服务器走丢了~")
                }
            })
        })
    });
</script>
  • 使用前端代码去请求后端tomcat时候,出现如下问题:
    在这里插入图片描述

  • 原因是:前端服务器端口号为5500,后端服务器端口号为8080,端口号不同产生了跨域问题。

2. 使用JSONP解决跨域问题

  1. 修改前端代码:
// 2.使用JSONP解决跨域
$.ajax({
    url: url + "login.action",
    type: "get",                        // JSONP只支持get请求方式
    contentType: "application/json",
    dataType: "jsonp",                  // 接收服务器数据类型
    jsonp: "callback",                  // 用于服务端获取参数名称
    jsonpCallback: "callbackFun",       // 函数名称
    data: encodeURIComponent(userJson),     // 对请求参数的JSON进行转码,因为tomcat请求url不支持{}和:
    success: function(response){
        var data = JSON.stringify(response);
        $("#text").text(data)
    },
    error: function(){
        alert("服务器走丢了~")
    }
})
  • 浏览器发出了如下请求:
    在这里插入图片描述
    在这里插入图片描述
  1. 修改后端代码:
@Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
    // 使用JSONP解决跨域:
    // 1.获取回调函数名
    String methodName = req.getParameter("callback");
    
    // 2.读取请求参数中的JSON数据
    HttpServletRequest request = (HttpServletRequest) req;
    String queryString = request.getQueryString();
    String[] params = queryString.split("&");
    String json = params[1].replaceAll("%22", "\"");
    // 对URL中的JSON数据进行解码处理
    json = URLDecoder.decode(json,"UTF-8");
    
    // 3.返回响应结果
    Person person = JSON.parseObject(json, Person.class);
    PrintWriter writer = res.getWriter();
    // JSONP的响应格式为:methodName(响应参数)
    writer.print(methodName + "(" + JSON.toJSONString(person) + ")");
    writer.flush();
    writer.close();
}
  1. 运行结果:
    在这里插入图片描述

2.1 JSONP的基本原理

  • 动态添加script标签,然后通过它的src属性发送跨域请求,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。
  • 服务端加载一段脚本(用script标签),然后把数据放到一个函数参数里面,再然后浏览器李定义的那个函数就能拿到数据了。

2.2 JSONP的优点和缺点

  • 优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX支持;并且在请求完毕之后可以通过调用callback方式回传结果。
  • 缺点:只支持GET请求,而不支持POST等其他类型的HTTP请求。

3. 使用cors解决跨域问题

4. 使用nginx解决跨域问题

标签:跨域,url,前后,JSON,JSONP,解决,data,请求
来源: https://blog.csdn.net/qq_47155275/article/details/116115916

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有