jsonp跨域资源引起CORB

最新推荐文章于 2024-10-06 00:14:39 发布

weixin_34274029

最新推荐文章于 2024-10-06 00:14:39 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000018313378

本文介绍了JSONP作为跨域请求数据的方法，以及遇到的Content Security Policy (CORB)问题。当服务端设置"X-Content-Type-Options: nosniff"头时，非JavaScript MIME类型的响应会导致浏览器阻止执行，从而引发错误。解决方法包括移除"nosniff"头或确保返回正确的JavaScript MIME类型。另外，通过代理服务器进行跨域请求也是可行的策略。

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

一、jsonp的使用

jsonp是实现跨域请求数据的一种方式，解决了由于浏览器同源策略带来的安全限制；虽然浏览器有同源策略的限制，但对于一些特殊的dom元素却可引用非同源资源，例如<img src=""/> <script src=""/>等，下面结合例子说明：

jquery直接发起ajax调用

服务端代码

@RequestMapping(value = "/load/data")
public void loadData2(@RequestParam("callback") String callback,
                     HttpServletResponse response) throws IOException {
    Map<String, String> data = new HashMap<>();
    data.put("name", "xudj");
    data.put("age", "18");
    // 转json
    String jsonData = JSON.toJSONString(data);

    //用回调函数名称包裹返回数据
    String result = callback + "(" + jsonData + ")";
    response.getWriter().write(result);
}

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: 'http://localhost:8080/load/data',
                    type: 'GET',
                    success: function (data) {
                        $(text).val(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
<input id="btn" typ

最低0.47元/天解锁文章

200万优质内容无限畅学

jsonp跨域资源引起CORB

一、jsonp的使用

jquery直接发起ajax调用