[聚合文章] JSONP原理探究

JSONP是一直种解决跨域问题的方案，实现的原理来自于页面中的 <script> 标签能够跨域请求资源。要通过JSONP实现跨域，需要服务器端做额外支持。

前端代码

前端部分核心在于 通过script标签的src告诉服务器端约定好的回调方法名 。代码如下

var callbackName = 'callbackFunc';
window[callbackName] = function (response){
    // 对返回的数据做后续处理
    console.log(response)
};
var script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/sword-room/JSONPServlet?callback='+callbackName+'&param=JSONP';
document.body.appendChild(script);

后端代码

服务端部分主要为接收前端发送过来的请求参数，核心在于 约定好的方法名 。代码如下

package com.demo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/JSONPServlet")
public class JSONPServletextends HttpServlet{
	private static final long serialVersionUID = 1L;

	public JSONPServlet(){
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		//请求参数
		String param = request.getParameter("param");
		//跟前端部分约定好的方法名
	    String callback = request.getParameter("callback");
	    PrintWriter out = response.getWriter();
	    //返回JSON字符串
	    response.setContentType("text/javascript; charset=UTF-8");
	    String jsonData = "{a:1,b:2,param:'"+param+"'}";
	    out.print(callback+"("+jsonData+");");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		 doGet(request, response);
	}
}

总结

其它：

1. 跨域情况下一般都牵涉到权限问题，可通过SSO或者服务器端开放匿名访问权限解决，或者token也行
2. 使用Nginx的代理功能来解决跨域问题也是很好的一种办法