您的位置 首页 java

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

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

如我们需要请求

获取如下数据,是我部署在服务器上的,2020年到期,你也可以访问

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

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

json请求

对应的js请求代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js+springboot解决跨域请求</title>
</head>
<body>
<script src="">
</script>
<script>
 var baseUrl = "";
 $(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>
 

请求效果如下

跨域请求

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

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

文章来源:智云一二三科技

文章标题:springboot解决js前端跨域问题,javascript跨域问题解决

文章地址:https://www.zhihuclub.com/181844.shtml

关于作者: 智云科技

热门文章

网站地图