微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

请求效果如下

跨域请求

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐