当先锋百科网

首页 1 2 3 4 5 6 7

js跨域问题 ajax跨域问题?

定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。
所谓同源是指,域名,协议,端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。

概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。

为什么浏览器要限制跨域访问呢?

原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。

为什么要跨域?
既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

5种解决方案

1. 使用jsonp
什么是jsonp(JSON with Padding).
JSONP也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON,例如:callback({“name”,“name1”});
JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
jsonp的原理是:
就是利用

$.ajax({ 
    //url: './cross_domain.php',
    url: 'http://demoff.sinaapp.com/cross_domain.php',
    type: 'GET',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    data: {},
    success: function(data){ 
        addContents(data);
    },
    error: function(xmlHttpRequest,textStatus,error){ 
        console.log(xmlHttpRequest.status);
        console.log(textStatus);
    }

2、设置Access-Control-Allow-*头:
jsonp的方式虽然简便,但有个缺点,就是只支持get请求,对于只支持post的接口就不支持了。通过后台设置Access-Control-*等header,可以解决跨域问题,而且get,post都支持。

Access-Control-Allow-Origin设置允许跨域的白名单,在白名单里的跨域请求是允许的。
Access-Control-Allow-Methods设置接受的方法,这里只接受POST方法。

3、注解的方式允许跨域:

非常简单,我们可以在Controller类或其方法上加@CrossOrigin注解,来使之支持跨域。
4、springCloud中使用CrosWebFilter过滤。
在这里插入图片描述

参考百度经验:
https://jingyan.baidu.com/article/d45ad148c5681c29552b80a6.html