首页 > 其他分享> 文章详细

跨域的两种解决方法jsonp和CORS

2020-02-23 21:04:00 阅读：203 来源： 互联网

标签：console 请求 jsonp log CORS http data 跨域

1、跨域

什么是跨域？

当你请求的url是不同源的数据的时候，浏览器一般会抛出请求跨域的错误，如下图：

造成跨域的原因？

即你违反了浏览器的同源策略的限制=>阻止一个域的js脚本和另外一个域的内容进行交互；

所谓的'同源策略'：

指在两个页面具有相同的协议，域名和端口号；

url格式：https://www.cnblogs.com:8080/Zxq-zn/p/12327985.html

协议：'http:',有http，https，ftp等；
域名：www.cnblogs.com,可用ip地址表示；
端口：':8080'跟在域名的后面,省略的话采用默认的端口号；
虚拟目录：从域名后面第一个'/'到最后一个'/'位置
文件名：'12327985.html'

2、jsonp方式解决跨域

原理：网页通过添加一个<script>元素，利用script标签请求非同源的资源，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

缺点：只支持get请求

java接口控制器：

//   @CrossOrigin
    @GetMapping(value = "/api/blogs")
    @ResponseBody
    public JSONPObject list(HttpServletRequest request, HttpServletResponse response, @RequestParam String callback) throws Exception {
        ModelAndView model = new ModelAndView();
        List<Blog> data = blogService.findAll();
        model.addObject("data",data);
        return new JSONPObject(callback,model);
    }

原生js实现：

    <script>
        function dosomething(res) {
            console.log('get');
            console.log(res);
        }
    </script>
    <script src="http://localhost:8088/api/blogs?callback=dosomething"></script>

jq实现：

    <script>
        $.ajax({
            url: 'http://localhost:8088/api/blogs',
            type: 'get',
            dataType: 'jsonp',
            jsonp: "callback",
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log('失败了!');
            }
        });
    </script>

3、CORS方式

简介：CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的解决方法。

CORS实现原理：

普通CROS请求：在服务器端设置Access-Control-Allow-Origin:*=>代表接受任意域名的请求
如图：

javah后台：

    @CrossOrigin
    @GetMapping(value = "/api/blogs")
    @ResponseBody
    public List<Blog> list(HttpServletRequest request, HttpServletResponse response) throws Exception {
        List<Blog> data = blogService.findAll();
        return data;
    }

带cookies的CROS请求：
jq设置：

        $.ajax({
            url: 'http://localhost:8088/api/blogs',
            type: 'get',
            xhrFields: {
                withCredentials: true //请求携带cookies
            },
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log('失败了!');
            }
        });

浏览器报错：即后台的 Access-Control-Allow-Origin:不能设置为*,要设置为具体的url；且要在后台设置接受cookies，即设置后台的Access-Control-Allow-Credentials

修改后的java后台为：

    //@CrossOrigin(origins="http://localhost:8080")//允许访问的域
    @GetMapping(value = "/api/blogs")
    @ResponseBody
    public List<Blog> list(HttpServletRequest request, HttpServletResponse response) throws Exception {

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");//设置接受具体的url

        response.setHeader("Access-Control-Allow-Credentials", "true");/设置接受cookies
        List<Blog> data = blogService.findAll();
        return data;
    }

axios代码:

    this.$axios.defaults.withCredentials = true;//设置cookies
    this.$axios.get('http://localhost:8088/api/blogs')
    .then(response => {
      console.log(response);
    })

请求如图：

标签：console,请求,jsonp,log,CORS,http,data,跨域
来源： https://www.cnblogs.com/Zxq-zn/p/12329781.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9