javascript跨域的几种类型及解决方案

最新推荐文章于 2024-11-17 18:47:06 发布

地瓜团子233

最新推荐文章于 2024-11-17 18:47:06 发布

阅读量567

点赞数

文章标签：跨域

本文链接：https://blog.csdn.net/digua523/article/details/86231841

版权

一、跨域产生的背景:浏览器对于javascript同源策略的保护

1.跨域的几种类型:

2.解决方案:

1>后端直接设置解决资源跨域策略:

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Methods","POST, GET, OPTIONS, PUT, DELETE");

位置:

2>jsonp+callback

前端：

<html> <head> <title>跨域测试</title> <script src="js/jquery-1.11.3.min.js"></script> <script> //回调函数 function showData (result) { var data = JSON.stringify(result); //json对象转成字符串 $("#text").val(data); } $(document).ready(function () { $("#btn").click(function () { //向头部输入一个脚本，该脚本发起一个跨域请求 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>"); }); }); </script> </head> <body> <input id="btn" type="button" value="跨域获取数据" /> <textarea id="text" style="width: 400px; height: 100px;"></textarea> </body> </html>

后端：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

//数据

List<Star> starList = getStarList();

JSONArray jsonArray = JSONArray.fromObject(studentList);

String result = jsonArray.toString();

//前端传过来的回调函数名称

String callback = request.getParameter("callback");

//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了

result = callback + "(" + result + ")";