ajax跨域

最新推荐文章于 2022-07-05 08:58:56 发布

原创最新推荐文章于 2022-07-05 08:58:56 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#跨域

java 同时被 2 个专栏收录

828 篇文章

订阅专栏

web前端

294 篇文章

订阅专栏

本文深入探讨了JSONP和CORS两种跨域数据访问解决方案，详细讲解了JSONP的工作原理及其在Ajax请求中的应用，同时介绍了CORS机制在Spring框架下的配置方法，帮助开发者有效应对跨域请求挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通（发出XMLHttpRequest请求），而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

1、跨域请求原理：

先来一个例子：我们在http://169.254.200.238:8020/jsonp/index.html下向http://169.254.200.238:8080/jsonp.do发起请求：

 $.get("http://169.254.200.238:8080/jsonp.do", function (data) {
     console.log(data);
 });

由于端口不同（不同源），所以浏览器会报错。那我们换一种方式：

<script type="text/javascript" src="http://169.254.200.238:8080/jsonp.do"></script>

可以看到，此时同样的请求确成功了！由此，我们可以得出<scrpit>可以进行跨域请求，这是jsonp的基础。因为只有发出的请求是xhr请求时浏览器才会进行跨域校验，而jsonp发出的是script 浏览器不会进行校验，跨域问题成功解决。

但是浏览器同样抛出了语句不合法的异常，那是因为我们请求的数据会立马被浏览器当作javascript语句去执行（谁让我们用<script>去请求数据呢），但是请求到的数据格式并不符合其语法规范。那么，如何解决这一问题呢？

我们把请求的数据当作一个函数的参数，并且这个函数在客户端存在的话，那么这就行得通。例如：返回的数据为

callback( {"result":"success"} )

其中{"result":"success"} 是我们想要获取的数据，浏览器会立即执行callback这个函数，此时，我们已经定义好了函数名为callback这个函数：

function callback(data){
    // data为返回数据 
    // TODO 解析数据
}

这样是不是一切都说的通了！所以jsonp跨域请求的关键就在于：服务端要在返回的数据外层包裹一个客户端已经定义好的函数

2、ajax使用jsonp解决跨域问题示例：

1）前端代码：

$.ajax({
    type: "get", // 请求方式
    url: "http://169.254.200.238:8080/jsonp.do", // 请求地址
    dataType: "jsonp",	// 标志跨域请求			
    // 跨域函数名的键值，即服务端提取函数名的钥匙（默认为callback）
    jsonp: "callbackparam",   
    // 客户端与服务端约定的函数名称
    jsonpCallback: "jsonpCallback",
    // 请求成功的回调函数，json既为我们想要获得的数据
    success: function(json) {
        console.log(json);
    },
    // 请求失败的回调函数
    error: function(e) {
	alert("error");
    }
});

注：不是必须通过jq发起请求 , 例如:Vue Resource中提供 $.http.jsonp(url, [options])

2）后端代码：

@RequestMapping({"/jsonp.do"})
public String jsonp(@RequestParam("callbackparam") String callback){
    // 这里callback === "jsonpCallback"
    return callback + "({\"result\":\"success\"})";
}

后端通过jsonp:属性中的值（callbackparam）来获取前后端约定好的函数名（这个函数名在前段jsonpCallback属性中指定的），后端用这个函数名包裹返回数据即可。

这就是一个完整的跨域请求，但是这样就结束了吗？细心的同学可能会发觉，现在如果不通过跨域去请求jsonp.do这个接口，不是就报错了吗？是的，现在这个接口仅仅只能被携带callbackparam这个参数的请求。为了解决这个问题，我们要判断请求的来源：

return  (request.from === jsonp) ? callback(data) : data ;

这才是我们想要的结果，解决这个问题需要我们对每个接口都做判断，或者通过AOP等等方式实现统一处理，这样做好像并不优雅。

3）通过$.getJSON(）：

利用getJSON来实现，只要在地址中加上callback=?参数即可，参考代码如下：

$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
         console.log(data);
});

3、后台跨域问题解决：
基于SpringMVC,SpringBoot框架的请求添加拦截器，在拦截器中对返回前端的response设置Access-Control-Allow-Origin为*，来解决跨域问题，如果这里修改后，前端就不需要修改了，因为添加该属性后，后台对任意请求源都认为是合法请求,代码如下

HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST");

4、CORS：

在spring4.2以上的版本，支持了CORS(跨域资源共享)，CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。为什么说它优雅呢？

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。所以我们客户端可以像什么都没发生一样，依旧漠不关心的发送我们的请求：

// 不用担心跨域问题
$.ajax({
    // 请求方式
    type: "get", 
    // 请求地址
    url: "http://169.254.200.238:8080/jsonp.do", 
    // 此时依然请求json格式数据 而非jsonp
    dataType: "json",				
    // 请求成功的回调函数
    success: function(json) {
        console.log(json);
    },
    // 请求失败的回调函数
    error: function(e) {
	alert("error");
    }
});

而我们用spring MVC实现的服务端也出乎意料的简洁（基于xml）：

// spring配置文件 spring必须为4.2以上版本
<mvc:cors>   
   <mvc:mapping path="/**" />
</mvc:cors>

这里，我对整个项目添加了跨域支持， path 为支持跨域的路径，同样你可以在这里做详细配置：

<mvc:cors>

    <mvc:mapping path="/api/**"
        allowed-origins="http://domain1.com, http://domain2.com"
        allowed-methods="GET, PUT"
        allowed-headers="header1, header2, header3"
        exposed-headers="header1, header2" allow-credentials="false"
        max-age="123" />

    <mvc:mapping path="/resources/**"
        allowed-origins="http://domain1.com" />

</mvc:cors>

当然，spring也支持通过java的方式进行配置：

// 此种方式等同于xml全局配置
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

// 此种方式为详细配置
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(false).maxAge(3600);
    }
}

spring 也允许针对某个controller类或者方法进行跨域，通过@Configuration注解完成。

参考：

https://juejin.im/entry/59085cd10ce463006180b4fc

https://blog.youkuaiyun.com/zhoucheng05_13/article/details/78694766