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

最近用springboot开发后台接口,但是接口开发好以后,用js请求接口json数据,遇到了烦人的跨域问题,也是找了好久才找到解决方法。下面来讲解下解决步骤。

一,编写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做下请求验证下

如我们需要请求https://localhost:8443/pv/2048/list

获取如下数据,https://localhost:8443/pv/2048/list是我部署在服务器上的,2020年到期,你也可以访问

{

"code": 100,

"msg": "成功",

"data": 3

}

json请求

对应的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>

请求效果如下

跨域请求

有任何关于编程的问题都可以留言或者私信我,我看到后会及时解答

编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。

相关文章

这篇文章主要介绍了spring的事务传播属性REQUIRED_NESTED的原...
今天小编给大家分享的是一文解析spring中事务的传播机制,相...
这篇文章主要介绍了SpringCloudAlibaba和SpringCloud有什么区...
本篇文章和大家了解一下SpringCloud整合XXL-Job的几个步骤。...
本篇文章和大家了解一下Spring延迟初始化会遇到什么问题。有...
这篇文章主要介绍了怎么使用Spring提供的不同缓存注解实现缓...