springboot解决js前端跨域问题,javascript跨域问题解决

简介: 本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。

一,编写Filter过滤器

把下面代码放到你的springboot项目中就可以了

代码解读

复制代码

package com.qcl;

import org.springframework.stereotype.Component;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**
 * 处理跨域问题
 *  qcl:微信2501902696
 */
@Component
public class OriginFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }
}

二,用js做下请求验证下


代码解读

复制代码

{
    "code": 100,
    "msg": "成功",
    "data": 3
}

对应的js请求代码如下

代码解读

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js+springboot解决跨域请求</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
    var baseUrl = "https://30paotui.com";

    $(document).ready(function () {
        $("button").click(function () {
            $.ajax({
                url: baseUrl + "/pv/2048/list", success: function (result) {
                    document.getElementById("p1").innerHTML = result;
                    var str = JSON.stringify(result); //将JSON对象转化为JSON字符
                    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
                    console.log(str);
                    console.log(obj);
                    console.log(obj.data);
                    console.log(result.msg);
                    console.log(result.code);
                }
            });
        });
    });
</script>
<p id="p1"></p>
<button>获取其他内容</button>

</body>
</html>

请求效果如下

作者:编程小石头

链接:https://juejin.cn/post/6844903857198202888

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
6月前
|
XML 前端开发 JavaScript
Javaweb之Ajax的详细解析
1.1 Ajax介绍 1.1.1 Ajax概述 我们前端页面中的数据,如下图所示的表格中的学生信息,应该来自于后台,那么我们的后台和前端是互不影响的2个程序,那么我们前端应该如何从后台获取数据呢?因为是2个程序,所以必须涉及到2个程序的交互,所以这就需要用到我们接下来学习的Ajax技术。
89 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
151 0
|
2月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
36 1
|
JSON JavaScript 前端开发
js如何解决跨域问题?
js如何解决跨域问题?
163 0
|
前端开发 JavaScript
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
Vue —— 进阶 AJAX(解决开发环境 Ajax 跨域问题)
159 0
|
前端开发 Java 应用服务中间件
解决项目中的跨域问题
解决项目中的跨域问题
172 0
|
Web App开发 XML 缓存
🍉JS Web-API之AJAX使用秘籍
🍉JS Web-API之AJAX使用秘籍
122 7
🍉JS Web-API之AJAX使用秘籍
|
JSON JavaScript 前端开发
初学JavaWeb需要的前端js,JavaScript是什么样的?
初学JavaWeb需要的前端js,JavaScript是什么样的?
127 0
初学JavaWeb需要的前端js,JavaScript是什么样的?
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
90 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(一)
|
移动开发 JavaScript 前端开发
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。
82 0
前后端的展示页面.本项目采用了以下知识点.JSP Servlect HTML5 JQUERY JavaScript Css3 MYSQL Sping架包 和几个框架。(二)
下一篇
无影云桌面