解决跨域请求问题：jsonp & CORS

前端的跨域问题时常会困扰我们，本文介绍两种解决办法，jsonp 和 CORS 这两种方法。

一、背景

跨域问题是发生在前端的问题，是指前端在访问不同域名或端口或协议的地址时候，由于浏览器的同源策略的约束，所以会产生跨域问题。

如下 ajax 请求不同端口的地址，就会出现 403：</p>

&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;"get",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"http://localhost:9091/rest/jsonp",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;"json",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(val)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(val);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});

二、jsonp 解决跨域

此法很简单，前端和后端分别做点小改动就可。

1）前端修改

就是将 ajax 请求的 datatype 设置成 jsonp 即可，如下：

2）后端修改

后端只需要添加配置类即可，如下（此处是 springboot）：

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;Created&nbsp;by&nbsp;Jet&nbsp;on&nbsp;2017/12/10.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@ControllerAdvice
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@SpringBootConfiguration
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;class&nbsp;JsonAdvice&nbsp;extends&nbsp;AbstractJsonpResponseBodyAdvice{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;JsonAdvice(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;这样如果请求中带&nbsp;callback&nbsp;参数，Spring&nbsp;就知道这个是&nbsp;jsonp&nbsp;的请求了
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super("callback");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

3）效果

地址后面会自动生成 callback 参数，当然，这就意味着你也可以手动定义 callback 函数来指定回调函数。

4）原理

其实底层就是通过动态创建