springboot获取原生js请求_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做下请求验证下

{

"code": 100,

"msg": "成功",

"data": 3

}

对应的js请求代码如下

js+springboot解决跨域请求

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);

}

});

});

});

获取其他内容

请求效果如下

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

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